feat: Add new dashboard pages for full, receipt, actual, and expedition data, incorporating session management, a loading UI, and data processing.

app.py

@@ -7,7 +7,6 @@ from streamlit.components.v1 import html as _html
 from dotenv import load_dotenv
 load_dotenv()
 
-# ← substitui GSheetsConnection
 from gs_client import read_ws, write_ws
 
 st.set_page_config(
@@ -17,8 +16,15 @@ st.set_page_config(
     initial_sidebar_state="collapsed"
 )
 
+# ── ESCONDE UI DO STREAMLIT ───────────────────────────────────────────
+st.markdown("""<style>
+#MainMenu,footer,header,.stDeployButton,[data-testid="stToolbar"],
+[data-testid="stDecoration"],[data-testid="stStatusWidget"]{display:none!important}
+footer{visibility:hidden!important;height:0!important}
+</style>""", unsafe_allow_html=True)
+
 # ── COOKIE SESSION ────────────────────────────────────────────────────
-_cc = CookieController()
+_cc                  = CookieController()
 COOKIE_NAME          = "pmja_session"
 SESSION_EXPIRY_HOURS = 8
 
@@ -103,7 +109,7 @@ COLS = [
     "last_login", "email_verified", "verification_code", "code_expiry", "image_url",
 ]
 
-# ── DB (agora usa gs_client) ──────────────────────────────────────────
+# ── DB ────────────────────────────────────────────────────────────────
 def get_users() -> pd.DataFrame:
     df = read_ws("users_auth", spreadsheet="main")
     if df.empty: return pd.DataFrame(columns=COLS)
@@ -182,11 +188,12 @@ def verify_email_code(username, code):
     time.sleep(1)
     return True, "Email verificado!"
 
-# ── session state ─────────────────────────────────────────────────────
+# ── SESSION STATE ─────────────────────────────────────────────────────
 for k, v in [
     ("logged_in", False), ("user_data", None), ("page", "login"),
     ("temp_username", None), ("msg", ""), ("msg_type", ""),
     ("_action", None), ("session_uid", None), ("session_usr", None), ("session_exp", None),
+    ("show_loading", False),
 ]:
     if k not in st.session_state:
         st.session_state[k] = v
@@ -214,6 +221,71 @@ elif action == "extend":
         save_session(user["id"], user["username"], SESSION_EXPIRY_HOURS)
         st.session_state.msg = "Sessão estendida por 2 horas"; st.session_state.msg_type = "success"
 
+# ── LOADING SCREEN MD ────────────────────────────────────────────────
+LOADING_MD = """
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Sora:wght@700;800&display=swap" rel="stylesheet">
+<style>
+#pmja-loading{position:fixed;inset:0;z-index:999999;
+  background:linear-gradient(135deg,#003a70 0%,#0056A3 100%);
+  display:flex;flex-direction:column;align-items:center;justify-content:center;
+  font-family:'DM Sans',sans-serif;}
+#pmja-loading .ld-logos{display:flex;align-items:center;gap:28px;margin-bottom:40px}
+#pmja-loading .ld-logo{height:36px;filter:brightness(0) invert(1);opacity:.9}
+#pmja-loading .ld-div{width:1px;height:36px;background:rgba(255,255,255,.25)}
+#pmja-loading .ld-title{font-family:'Sora',sans-serif;font-size:clamp(16px,4vw,22px);
+  color:#fff;font-weight:800;letter-spacing:-.5px;margin-bottom:4px;text-align:center}
+#pmja-loading .ld-sub{font-size:clamp(11px,3vw,13px);color:rgba(255,255,255,.7);
+  font-weight:600;margin-bottom:44px;text-align:center}
+#pmja-loading .ld-spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.2);
+  border-top-color:#fff;border-radius:50%;animation:ldspin .8s linear infinite;margin-bottom:28px}
+@keyframes ldspin{to{transform:rotate(360deg)}}
+#pmja-loading .ld-bar-wrap{width:min(280px,70vw);height:4px;
+  background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;margin-bottom:16px}
+#pmja-loading .ld-bar{height:100%;width:0%;background:#fff;border-radius:99px;transition:width .4s ease}
+#pmja-loading .ld-status{font-size:12px;color:rgba(255,255,255,.65);font-weight:600;
+  letter-spacing:.3px;text-align:center}
+#pmja-loading .ld-dots span{animation:ldblink 1.2s infinite;opacity:0}
+#pmja-loading .ld-dots span:nth-child(2){animation-delay:.2s}
+#pmja-loading .ld-dots span:nth-child(3){animation-delay:.4s}
+@keyframes ldblink{0%,100%{opacity:0}50%{opacity:1}}
+</style>
+<div id="pmja-loading">
+  <div class="ld-logos">
+    <img class="ld-logo" src="https://companieslogo.com/img/orig/AZ2.F-d26946db.png?t=1720244490">
+    <div class="ld-div"></div>
+    <img class="ld-logo" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Logo-engie.svg">
+  </div>
+  <div class="ld-spinner"></div>
+  <div class="ld-title">PMJA — Gestão de Materiais</div>
+  <div class="ld-sub">UHE Jaguara · Rifaina SP</div>
+  <div class="ld-bar-wrap"><div class="ld-bar" id="pmja-bar"></div></div>
+  <div class="ld-status" id="pmja-status">Autenticando
+    <span class="ld-dots"><span>.</span><span>.</span><span>.</span></span>
+  </div>
+</div>
+<script>
+(function(){
+  var steps=[
+    {p:25,msg:'Autenticando'},
+    {p:55,msg:'Verificando credenciais'},
+    {p:80,msg:'Carregando dados'},
+    {p:96,msg:'Redirecionando'}
+  ];
+  var i=0;
+  function next(){
+    if(i>=steps.length)return;
+    var s=steps[i++];
+    var bar=document.getElementById('pmja-bar');
+    var st=document.getElementById('pmja-status');
+    if(bar)bar.style.width=s.p+'%';
+    if(st)st.innerHTML=s.msg+'<span class="ld-dots"><span>.</span><span>.</span><span>.</span></span>';
+    setTimeout(next,700+Math.random()*400);
+  }
+  setTimeout(next,200);
+})();
+</script>
+"""
+
 # ── CSS ───────────────────────────────────────────────────────────────
 _CSS = """\
 <style>
@@ -264,7 +336,7 @@ div[data-testid="stAlert"]{font-size:13px!important;border-radius:12px!important
 """
 _html(_CSS, height=0)
 
-# ── page state ────────────────────────────────────────────────────────
+# ── PAGE STATE ────────────────────────────────────────────────────────
 pg   = "dashboard" if st.session_state.logged_in else st.session_state.page
 user = st.session_state.user_data
 
@@ -328,22 +400,39 @@ with card:
             st.text_input("Usuário", placeholder="nome_usuario", key="li_u")
             st.text_input("Senha", placeholder="••••••••", type="password", key="li_p")
             sub = st.form_submit_button("Entrar →", type="primary", use_container_width=True)
+
         if sub:
             u = st.session_state.li_u.strip(); p = st.session_state.li_p
             if not (u and p):
-                st.session_state.msg = "Preencha todos os campos"; st.session_state.msg_type = "error"; st.rerun()
+                st.session_state.msg = "Preencha todos os campos"
+                st.session_state.msg_type = "error"
+                st.rerun()
             else:
+                # Mostra loading antes de autenticar
+                loading_ph = st.empty()
+                loading_ph.markdown(LOADING_MD, unsafe_allow_html=True)
+
                 ok, result = login_user(u, p)
+
                 if ok:
-                    st.session_state.logged_in = True; st.session_state.user_data = result
+                    st.session_state.logged_in = True
+                    st.session_state.user_data = result
                     save_session(result["id"], u, SESSION_EXPIRY_HOURS)
                     st.switch_page("pages/rec.py")
                 elif result == "EMAIL_NOT_VERIFIED":
+                    loading_ph.empty()
                     resend_verification_code(u)
-                    st.session_state.temp_username = u; st.session_state.page = "verify"
-                    st.session_state.msg = "📧 Código reenviado para seu email"; st.session_state.msg_type = "info"; st.rerun()
+                    st.session_state.temp_username = u
+                    st.session_state.page = "verify"
+                    st.session_state.msg = "📧 Código reenviado para seu email"
+                    st.session_state.msg_type = "info"
+                    st.rerun()
                 else:
-                    st.session_state.msg = result; st.session_state.msg_type = "error"; st.rerun()
+                    loading_ph.empty()
+                    st.session_state.msg = result
+                    st.session_state.msg_type = "error"
+                    st.rerun()
+
         divider()
         if st.button("Criar nova conta →", use_container_width=True, key="go_reg"):
             st.session_state.page = "register"; st.session_state.msg = ""; st.rerun()
@@ -447,5 +536,4 @@ with card:
         "<div style='text-align:center;padding-top:12px;font-size:10px;color:#94a3b8;letter-spacing:.1em;'>"
         "PMJA · UHE Jaguara · Rifaina SP</div>",
         unsafe_allow_html=True,
-    )
-#rec.py
+    )

pages/atual.py

@@ -8,7 +8,39 @@ from gs_client import read_ws, write_ws
 from dotenv import load_dotenv
 load_dotenv()
 
-# ── TIMEZONE BRASÍLIA ──
+# ── CONFIG — deve ser o PRIMEIRO comando st. ──────────────────────────
+st.set_page_config(
+    layout="wide",
+    initial_sidebar_state="collapsed",
+    page_title="TaskFlow | Kanban",
+    page_icon="📊"
+)
+
+# ── ESCONDE UI DO STREAMLIT imediatamente ─────────────────────────────
+st.markdown("""<style>
+#MainMenu,footer,header,.stDeployButton,[data-testid="stToolbar"],[data-testid="stToolbarActions"],
+[data-testid="stDecoration"],[data-testid="stStatusWidget"],[data-testid="collapsedControl"],
+[data-testid="stSidebarCollapsedControl"],[data-testid="manage-app-button"],[data-testid="stBaseButton-header"],
+button[title="Deploy"],button[aria-label="Deploy"],button[aria-label="Share"],button[title="Share"],
+.stAppDeployButton,section[data-testid="stSidebar"],div[class*="deployButton"],div[class*="viewerBadge"],
+div[class*="StatusWidget"]{display:none!important}
+footer{visibility:hidden!important;height:0!important}
+.block-container,.element-container,.stMarkdown{padding:0!important;margin:0!important;max-width:100%!important}
+.stButton>button{position:fixed!important;left:-9999px!important;opacity:0!important;pointer-events:all!important;width:1px!important;height:1px!important}
+[data-testid="stHorizontalBlock"]{gap:0!important;margin:0!important;padding:0!important;height:0!important;overflow:visible!important;position:relative!important}
+iframe{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100dvh!important;border:none!important;z-index:9999!important}
+@media(max-width:900px){
+  iframe{position:relative!important;width:100%!important;height:100dvh!important;overflow:auto!important}
+  [data-testid="stAppViewContainer"],[data-testid="stMain"],.main,.block-container{height:100dvh!important;overflow:visible!important;padding:0!important}
+}
+.main,[data-testid="stAppViewContainer"]{background:#fff!important}
+div[data-testid="stDialog"]{z-index:99999!important;position:fixed!important}
+div[data-testid="stDialog"] .stButton>button{font-size:13px!important;color:#374151!important;background:#fff!important;border:1px solid rgba(0,0,0,.12)!important;padding:6px 14px!important;height:34px!important;width:auto!important;border-radius:8px!important;cursor:pointer!important;position:relative!important;left:auto!important;top:auto!important;opacity:1!important}
+div[data-testid="stDialog"] .stButton>button[kind="primary"]{background:#1d4ed8!important;border-color:#1d4ed8!important;color:#fff!important}
+div[data-testid="stDialog"] [data-testid="stHorizontalBlock"]{height:auto!important;overflow:visible!important;gap:8px!important}
+</style>""", unsafe_allow_html=True)
+
+# ── TIMEZONE BRASÍLIA ─────────────────────────────────────────────────
 def now_brt():
     return datetime.now(ZoneInfo("America/Sao_Paulo"))
 
@@ -71,6 +103,181 @@ def session_mins():
         return max(0, int((exp - datetime.now()).total_seconds() // 60))
     return 0
 
+# ── AUTH ──────────────────────────────────────────────────────────────
+if not st.session_state.get("logged_in"):
+    s = load_session()
+    if not s:
+        st.switch_page("app.py")
+
+# ── AUTO SWITCH ───────────────────────────────────────────────────────
+if 'inicio_exibicao' not in st.session_state:
+    st.session_state.inicio_exibicao = time.time()
+if time.time() - st.session_state.inicio_exibicao >= 180:
+    st.session_state.inicio_exibicao = time.time()
+    st.switch_page("pages/rec.py")
+
+# ── LOADING SCREEN ────────────────────────────────────────────────────
+LOADING_MD = """
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Sora:wght@700;800&display=swap" rel="stylesheet">
+<style>
+#pmja-loading{position:fixed;inset:0;z-index:999999;
+  background:linear-gradient(135deg,#1d4ed8 0%,#1e40af 100%);
+  display:flex;flex-direction:column;align-items:center;justify-content:center;
+  font-family:'Inter',sans-serif;}
+#pmja-loading .ld-logos{display:flex;align-items:center;gap:28px;margin-bottom:40px}
+#pmja-loading .ld-logo{height:36px;filter:brightness(0) invert(1);opacity:.9}
+#pmja-loading .ld-div{width:1px;height:36px;background:rgba(255,255,255,.25)}
+#pmja-loading .ld-title{font-family:'Sora',sans-serif;font-size:clamp(16px,4vw,22px);
+  color:#fff;font-weight:800;letter-spacing:-.5px;margin-bottom:4px;text-align:center}
+#pmja-loading .ld-sub{font-size:clamp(11px,3vw,13px);color:rgba(255,255,255,.7);
+  font-weight:600;margin-bottom:44px;text-align:center}
+#pmja-loading .ld-spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.2);
+  border-top-color:#fff;border-radius:50%;animation:ldspin .8s linear infinite;margin-bottom:28px}
+@keyframes ldspin{to{transform:rotate(360deg)}}
+#pmja-loading .ld-bar-wrap{width:min(280px,70vw);height:4px;
+  background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;margin-bottom:16px}
+#pmja-loading .ld-bar{height:100%;width:0%;background:#fff;border-radius:99px;transition:width .4s ease}
+#pmja-loading .ld-status{font-size:12px;color:rgba(255,255,255,.65);font-weight:600;
+  letter-spacing:.3px;text-align:center}
+#pmja-loading .ld-dots span{animation:ldblink 1.2s infinite;opacity:0}
+#pmja-loading .ld-dots span:nth-child(2){animation-delay:.2s}
+#pmja-loading .ld-dots span:nth-child(3){animation-delay:.4s}
+@keyframes ldblink{0%,100%{opacity:0}50%{opacity:1}}
+</style>
+<div id="pmja-loading">
+  <div class="ld-logos">
+    <img class="ld-logo" src="https://companieslogo.com/img/orig/AZ2.F-d26946db.png?t=1720244490">
+    <div class="ld-div"></div>
+    <img class="ld-logo" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Logo-engie.svg">
+  </div>
+  <div class="ld-spinner"></div>
+  <div class="ld-title">PMJA — Kanban</div>
+  <div class="ld-sub">Gestão de Materiais</div>
+  <div class="ld-bar-wrap"><div class="ld-bar" id="pmja-bar"></div></div>
+  <div class="ld-status" id="pmja-status">Conectando ao Google Sheets
+    <span class="ld-dots"><span>.</span><span>.</span><span>.</span></span>
+  </div>
+</div>
+<script>
+(function(){
+  var steps=[
+    {p:20,msg:'Conectando ao Google Sheets'},
+    {p:45,msg:'Carregando tarefas'},
+    {p:68,msg:'Carregando usuários'},
+    {p:88,msg:'Montando o board'},
+    {p:96,msg:'Quase pronto'}
+  ];
+  var i=0;
+  function next(){
+    if(i>=steps.length)return;
+    var s=steps[i++];
+    var bar=document.getElementById('pmja-bar');
+    var st=document.getElementById('pmja-status');
+    if(bar)bar.style.width=s.p+'%';
+    if(st)st.innerHTML=s.msg+'<span class="ld-dots"><span>.</span><span>.</span><span>.</span></span>';
+    setTimeout(next,950+Math.random()*550);
+  }
+  setTimeout(next,300);
+})();
+</script>
+"""
+
+loading_placeholder = st.empty()
+loading_placeholder.markdown(LOADING_MD, unsafe_allow_html=True)
+
+# ── ACESSO A DADOS via gs_client ──────────────────────────────────────
+def _read(planilha, ws, ttl=600):
+    if ttl == 0:
+        read_ws.clear()
+    df = read_ws(ws, spreadsheet=planilha)
+    if df is None or df.empty:
+        return pd.DataFrame()
+    for col in df.columns:
+        if df[col].dtype == object:
+            df[col] = df[col].fillna("").astype(str)
+            df[col] = df[col].replace("nan", "").replace("None", "")
+    return df
+
+def _update(planilha, ws, df):
+    write_ws(ws, df, spreadsheet=planilha)
+
+# ── DB ────────────────────────────────────────────────────────────────
+def calc_status(d):
+    try:
+        dl = datetime.strptime(str(d).strip(), '%d/%m/%Y').date()
+        t  = now_brt().date()
+        return "Atrasada" if dl < t else "Curto Prazo" if dl <= t + timedelta(days=3) else "Em dia"
+    except:
+        return "Em dia"
+
+def make_formulas(row_num, responsible_id, user_id):
+    return {
+        'responsible':       f'=SEERRO(PROCX(D{row_num};users_auth!A:A;users_auth!E:E;"");"")' ,
+        'url_responsible':   f'=SEERRO(PROCX(D{row_num};users_auth!A:A;users_auth!K:K;"");"")' ,
+        'email_responsible': f'=SEERRO(PROCX(D{row_num};users_auth!A:A;users_auth!C:C;"");"")' ,
+        'user_full_name':    f'=SEERRO(PROCX(N{row_num};users_auth!A:A;users_auth!E:E;"");"")' ,
+        'user_email':        f'=SEERRO(PROCX(N{row_num};users_auth!A:A;users_auth!C:C;"");"")' ,
+        'user_image':        f'=SEERRO(PROCX(N{row_num};users_auth!A:A;users_auth!K:K;"");"")' ,
+        'status':            f'=SE(G{row_num}="";"";SE(G{row_num}<HOJE();"Atrasada";SE(G{row_num}<=HOJE()+3;"Curto Prazo";"Em dia")))',
+    }
+
+def recalc():
+    try:
+        df = _read("users", "tasks", ttl=0)
+        if df.empty: return True
+        for i in df.index:
+            row_num  = i + 2
+            resp_id  = df.loc[i, 'responsible_id'] if 'responsible_id' in df.columns else ''
+            user_id  = df.loc[i, 'user_id']        if 'user_id'        in df.columns else ''
+            formulas = make_formulas(row_num, resp_id, user_id)
+            for k, val in formulas.items():
+                df.loc[i, k] = val
+        _update("users", "tasks", df)
+        load_data.clear()
+        return True
+    except Exception as e:
+        st.error(f"recalc: {e}")
+    return False
+
+@st.cache_data(ttl=600)
+def load_data():
+    try:
+        u = _read("users", "users_auth")
+        c = _read("users", "config")
+        t = _read("users", "tasks")
+
+        if not t.empty:
+            _map = {
+                'a fazer': 'A Fazer', 'em andamento': 'Em Andamento',
+                'paralizada': 'Paralizada', 'finalizada': 'Finalizada',
+                'finalizado': 'Finalizada',
+            }
+            if 'my_task' not in t.columns:
+                t['my_task'] = 'A Fazer'
+            else:
+                t['my_task'] = t['my_task'].apply(
+                    lambda v: _map.get(str(v).strip().lower(), str(v).strip()) or 'A Fazer'
+                )
+            if 'deadline' in t.columns:
+                t['status'] = t['deadline'].apply(calc_status)
+            if 'id' in t.columns:
+                t['id'] = pd.to_numeric(t['id'], errors='coerce').fillna(0).astype(int)
+                t = t[t['id'] != 0].reset_index(drop=True)
+
+        return (
+            u, c, t,
+            u['full_name'].tolist() if not u.empty and 'full_name' in u.columns else [],
+            c['priority'].tolist()  if not c.empty and 'priority'  in c.columns else [],
+        )
+    except Exception as e:
+        st.error(f"Erro ao carregar dados: {e}")
+        return pd.DataFrame(), pd.DataFrame(), pd.DataFrame(), [], []
+
+users_df, config_df, tasks_df, users_list, prio_list = load_data()
+
+# ── FECHA O LOADING ───────────────────────────────────────────────────
+loading_placeholder.empty()
+
 # ── EMAIL: TAREFA CRIADA ──────────────────────────────────────────────
 def send_task_created_email(task_row):
     def clean(v, fb=""):
@@ -128,7 +335,6 @@ def send_task_created_email(task_row):
     except Exception as e:
         st.warning(f"Falha ao enviar email: {e}")
 
-
 # ── EMAIL: TAREFA FINALIZADA ──────────────────────────────────────────
 def send_task_done_email(task_row):
     def clean(v, fb=""):
@@ -184,124 +390,6 @@ def send_task_done_email(task_row):
     except Exception as e:
         st.warning(f"Falha ao enviar email: {e}")
 
-# ── AUTH ──────────────────────────────────────────────────────────────
-if not st.session_state.get("logged_in"):
-    s = load_session()
-    if not s:
-        st.switch_page("app.py")
-
-# ── AUTO SWITCH ───────────────────────────────────────────────────────
-if 'inicio_exibicao' not in st.session_state:
-    st.session_state.inicio_exibicao = time.time()
-if time.time() - st.session_state.inicio_exibicao >= 180:
-    st.session_state.inicio_exibicao = time.time()
-    st.switch_page("pages/rec.py")
-
-st.set_page_config(
-    layout="wide",
-    initial_sidebar_state="collapsed",
-    page_title="TaskFlow | Kanban",
-    page_icon="📊"
-)
-
-# ── ACESSO A DADOS via gs_client ──────────────────────────────────────
-def _read(planilha, ws, ttl=600):
-    """Lê worksheet; planilha='main' ou 'users'."""
-    # ttl=0 significa forçar leitura fresca (ignora cache)
-    if ttl == 0:
-        read_ws.clear()
-    df = read_ws(ws, spreadsheet=planilha)
-    if df is None or df.empty:
-        return pd.DataFrame()
-    for col in df.columns:
-        if df[col].dtype == object:
-            df[col] = df[col].fillna("").astype(str)
-            df[col] = df[col].replace("nan", "").replace("None", "")
-    return df
-
-def _update(planilha, ws, df):
-    write_ws(ws, df, spreadsheet=planilha)
-
-# ── DB ────────────────────────────────────────────────────────────────
-def calc_status(d):
-    try:
-        dl = datetime.strptime(str(d).strip(), '%d/%m/%Y').date()
-        t  = now_brt().date()
-        return "Atrasada" if dl < t else "Curto Prazo" if dl <= t + timedelta(days=3) else "Em dia"
-    except:
-        return "Em dia"
-
-def make_formulas(row_num, responsible_id, user_id):
-    return {
-        'responsible':       f'=SEERRO(PROCX(D{row_num};users_auth!A:A;users_auth!E:E;"");"")' ,
-        'url_responsible':   f'=SEERRO(PROCX(D{row_num};users_auth!A:A;users_auth!K:K;"");"")' ,
-        'email_responsible': f'=SEERRO(PROCX(D{row_num};users_auth!A:A;users_auth!C:C;"");"")' ,
-        'user_full_name':    f'=SEERRO(PROCX(N{row_num};users_auth!A:A;users_auth!E:E;"");"")' ,
-        'user_email':        f'=SEERRO(PROCX(N{row_num};users_auth!A:A;users_auth!C:C;"");"")' ,
-        'user_image':        f'=SEERRO(PROCX(N{row_num};users_auth!A:A;users_auth!K:K;"");"")' ,
-        'status':            f'=SE(G{row_num}="";"";SE(G{row_num}<HOJE();"Atrasada";SE(G{row_num}<=HOJE()+3;"Curto Prazo";"Em dia")))',
-    }
-
-def recalc():
-    try:
-        df = _read("users", "tasks", ttl=0)
-        if df.empty: return True
-        for i in df.index:
-            row_num  = i + 2
-            resp_id  = df.loc[i, 'responsible_id'] if 'responsible_id' in df.columns else ''
-            user_id  = df.loc[i, 'user_id']        if 'user_id'        in df.columns else ''
-            formulas = make_formulas(row_num, resp_id, user_id)
-            for k, val in formulas.items():
-                df.loc[i, k] = val
-        _update("users", "tasks", df)
-        load_data.clear()
-        return True
-    except Exception as e:
-        st.error(f"recalc: {e}")
-    return False
-
-@st.cache_data(ttl=600)
-def load_data():
-    try:
-        u = _read("users", "users_auth")
-        c = _read("users", "config")
-        t = _read("users", "tasks")
-
-        if not t.empty:
-            # Normaliza my_task
-            _map = {
-                'a fazer': 'A Fazer', 'em andamento': 'Em Andamento',
-                'paralizada': 'Paralizada', 'finalizada': 'Finalizada',
-                'finalizado': 'Finalizada',
-            }
-            if 'my_task' not in t.columns:
-                t['my_task'] = 'A Fazer'
-            else:
-                t['my_task'] = t['my_task'].apply(
-                    lambda v: _map.get(str(v).strip().lower(), str(v).strip()) or 'A Fazer'
-                )
-
-            # Recalcula status localmente (ignora fórmula do Sheets)
-            if 'deadline' in t.columns:
-                t['status'] = t['deadline'].apply(calc_status)
-
-            # ID numérico para comparações seguras
-            if 'id' in t.columns:
-                t['id'] = pd.to_numeric(t['id'], errors='coerce').fillna(0).astype(int)
-                # Remove linhas com id=0 (linhas vazias vindas do Google Sheets)
-                t = t[t['id'] != 0].reset_index(drop=True)
-
-        return (
-            u, c, t,
-            u['full_name'].tolist() if not u.empty and 'full_name' in u.columns else [],
-            c['priority'].tolist()  if not c.empty and 'priority'  in c.columns else [],
-        )
-    except Exception as e:
-        st.error(f"Erro ao carregar dados: {e}")
-        return pd.DataFrame(), pd.DataFrame(), pd.DataFrame(), [], []
-
-users_df, config_df, tasks_df, users_list, prio_list = load_data()
-
 def update_sheet(td, action):
     try:
         df = _read("users", "tasks", ttl=0)
@@ -352,34 +440,7 @@ def update_sheet(td, action):
         st.error(f"update_sheet: {e}")
         return False
 
-
-# ── CSS ───────────────────────────────────────────────────────────────
-st.markdown("""<style>
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-*{font-family:'Inter',sans-serif!important}
-#MainMenu,footer,header,.stDeployButton,[data-testid="stToolbar"],[data-testid="stToolbarActions"],
-[data-testid="stDecoration"],[data-testid="stStatusWidget"],[data-testid="collapsedControl"],
-[data-testid="stSidebarCollapsedControl"],[data-testid="manage-app-button"],[data-testid="stBaseButton-header"],
-button[title="Deploy"],button[aria-label="Deploy"],button[aria-label="Share"],button[title="Share"],
-.stAppDeployButton,section[data-testid="stSidebar"],div[class*="deployButton"],div[class*="viewerBadge"],
-div[class*="StatusWidget"],iframe[title="streamlit_analytics"]{display:none!important}
-footer{visibility:hidden!important;height:0!important}
-.block-container,.element-container,.stMarkdown{padding:0!important;margin:0!important;max-width:100%!important}
-.stButton>button{position:fixed!important;left:-9999px!important;opacity:0!important;pointer-events:all!important;width:1px!important;height:1px!important}
-[data-testid="stHorizontalBlock"]{gap:0!important;margin:0!important;padding:0!important;height:0!important;overflow:visible!important;position:relative!important}
-iframe{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100dvh!important;border:none!important;z-index:9999!important}
-@media(max-width:900px){
-  iframe{position:relative!important;width:100%!important;height:100dvh!important;overflow:auto!important}
-  [data-testid="stAppViewContainer"],[data-testid="stMain"],.main,.block-container{height:100dvh!important;overflow:visible!important;padding:0!important}
-}
-.main,[data-testid="stAppViewContainer"]{background:#fff!important}
-div[data-testid="stDialog"]{z-index:99999!important;position:fixed!important}
-div[data-testid="stDialog"] .stButton>button{font-size:13px!important;color:#374151!important;background:#fff!important;border:1px solid rgba(0,0,0,.12)!important;padding:6px 14px!important;height:34px!important;width:auto!important;border-radius:8px!important;cursor:pointer!important;position:relative!important;left:auto!important;top:auto!important;opacity:1!important}
-div[data-testid="stDialog"] .stButton>button[kind="primary"]{background:#1d4ed8!important;border-color:#1d4ed8!important;color:#fff!important}
-div[data-testid="stDialog"] [data-testid="stHorizontalBlock"]{height:auto!important;overflow:visible!important;gap:8px!important}
-</style>""", unsafe_allow_html=True)
-
-# ── STATE ──
+# ── STATE ─────────────────────────────────────────────────────────────
 for k, v in [('dialog_action', None), ('dialog_task_id', None), ('show_menu', False)]:
     st.session_state.setdefault(k, v)
 
@@ -442,7 +503,7 @@ if not st.session_state.get("user_data"):
     else:
         clear_session(); st.switch_page("app.py")
 
-user = st.session_state.user_data
+user    = st.session_state.user_data
 img_url = user.get('image_url', '')
 mins    = session_mins()
 
@@ -626,16 +687,11 @@ def build_board(df, u, img, mins, show_menu, prios, stats, resps):
                 im = ''
             ava  = (f'<img src="{im}" onerror="this.style.display=\'none\'">'
                     if im else f'<div class="av-fb">{"".join(w[0].upper() for w in nm.split()[:2]) or "?"}</div>')
-            h += (f'<div class="card" draggable="true" data-id="{tid3}" data-status="{t["my_task"]}"'
+            h += (f'<div class="card" data-id="{tid3}" data-status="{t["my_task"]}"'
                   f' data-priority="{t.get("priority","")}" data-stat="{t.get("status","")}"'
                   f' data-title="{str(t.get("title","")).lower()}" data-desc="{str(t.get("description","")).lower()}"'
                   f' data-responsible="{nm.lower()}">'
-                  f'<div class="ca">'
-                  f'<button class="act" onclick="event.stopPropagation();sa(\'edit\',{tid3})" title="Editar">'
-                  f'<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4z"/></svg></button>'
-                  f'<button class="act act-d" onclick="event.stopPropagation();sa(\'delete\',{tid3})" title="Excluir">'
-                  f'<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6M9 6V4h6v2"/></svg></button>'
-                  f'</div>'
+
                   f'<div class="ct">{t["title"]}</div>{dh}'
                   f'<div class="cb">{sbadge(t["status"])} {pbadge(t["priority"])}</div>'
                   f'<div class="cf"><span class="cd2">📅 {t["deadline"]}</span>'
@@ -695,16 +751,12 @@ html,body{{height:100%;overflow:hidden;background:#fff}}
 .pf{{height:100%;border-radius:10px;opacity:.6;transition:width .3s ease}}
 .ctg{{display:none;font-size:12px;color:#9ca3af;transition:transform .2s;margin-left:6px}}
 .dz{{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px;display:flex;flex-direction:column;gap:6px;min-height:60px}}
-.dz.over{{filter:brightness(.94);outline:2px dashed rgba(0,0,0,.18);border-radius:8px}}
-.card{{background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);border-radius:8px;padding:9px 10px;cursor:grab;position:relative;transition:box-shadow .14s,transform .14s,background .14s,opacity .2s;flex-shrink:0;backdrop-filter:blur(4px)}}
+.card{{background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.95);border-radius:8px;padding:9px 10px;cursor:default;position:relative;transition:box-shadow .14s,transform .14s,background .14s,opacity .2s;flex-shrink:0;backdrop-filter:blur(4px)}}
 .card:hover{{background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.1);transform:translateY(-1px)}}
-.card:hover .ca{{opacity:1;pointer-events:all}}.card:active{{cursor:grabbing}}
-.card.dragging{{opacity:.35}}.card.hidden{{display:none}}
-.ca{{position:absolute;top:7px;right:7px;display:flex;gap:3px;opacity:0;pointer-events:none;transition:opacity .13s}}
-@media(hover:none){{.ca{{opacity:1;pointer-events:all}}}}
-.act{{width:20px;height:20px;border-radius:5px;border:1px solid rgba(0,0,0,.09);background:rgba(255,255,255,.9);color:#6b7280;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}}
-.act:hover{{background:#f3f4f6;color:#111827}}.act-d:hover{{background:#fef2f2!important;color:#dc2626!important}}
-.ct{{font-size:12px;font-weight:600;color:#111827;line-height:1.4;margin-bottom:4px;padding-right:48px;word-break:break-word}}
+.card:hover .ca{{opacity:1;pointer-events:all}}.card:active{{cursor:default}}
+.card.hidden{{display:none}}
+.act-d:hover{{background:#fef2f2!important;color:#dc2626!important}}
+.ct{{font-size:12px;font-weight:600;color:#111827;line-height:1.4;margin-bottom:4px;word-break:break-word}}
 .cd{{font-size:10.5px;color:#6b7280;line-height:1.45;margin-bottom:6px;word-break:break-word;white-space:pre-wrap}}
 .cb{{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:7px}}
 .badge{{display:inline-flex;align-items:center;font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px;border:1px solid transparent;line-height:1.4}}
@@ -716,7 +768,6 @@ html,body{{height:100%;overflow:hidden;background:#fff}}
 .cu img{{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(0,0,0,.09)}}
 .av-fb{{width:18px;height:18px;border-radius:50%;background:#e5e7eb;color:#374151;font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}}
 .cu span{{font-size:10px;color:#6b7280;font-weight:500}}
-.toast{{position:fixed;bottom:12px;right:12px;background:#111827;color:#f9fafb;padding:7px 14px;border-radius:7px;font-size:11px;font-weight:500;display:none;z-index:9999}}
 @media(max-width:900px){{
   html,body{{height:auto!important;overflow-x:hidden!important;overflow-y:auto!important;min-height:100%}}
   .tbs{{display:none}}.tbf{{display:none}}.tft{{display:flex}}.tbun{{display:none}}
@@ -770,7 +821,6 @@ html,body{{height:100%;overflow:hidden;background:#fff}}
   <select class="sel" id="fRm" onchange="af()">{ro}</select>
   <button class="tbcl" id="bCm" onclick="cf()">✕</button>
 </div>
-<div class="toast" id="toast">Salvando…</div>
 <div class="board">{cols}</div>
 <script>
 function sa(a,id,st){{
@@ -785,10 +835,6 @@ function sa(a,id,st){{
   }}catch(e){{console.warn(e)}}
   setTimeout(()=>{{try{{const u=new URL(window.parent.location.href);if(u.searchParams.get('action')===a)window.parent.location.href=u.toString();}}catch(e2){{}}}},150);
 }}
-function mv(id,st){{
-  const t=document.getElementById('toast');t.style.display='block';t.textContent='Salvando…';
-  sa('move',id,st);setTimeout(()=>{{t.textContent='✓ Salvo!';setTimeout(()=>t.style.display='none',1000);}},400);
-}}
 function gv(id){{const e=document.getElementById(id);return e?(e.value||'').toLowerCase().trim():''}}
 function af(){{
   const s=gv('fS')||gv('fSm'),p=gv('fP')||gv('fPm'),st=gv('fSt')||gv('fStm'),r=gv('fR')||gv('fRm');
@@ -820,18 +866,6 @@ function tfd(){{
   const d=document.getElementById('fdw'),b=document.getElementById('bFT');
   b.classList.toggle('active',d.classList.toggle('open'));
 }}
-let dc;
-document.addEventListener('dragstart',e=>{{if(e.target.classList.contains('card')){{dc=e.target;setTimeout(()=>e.target.classList.add('dragging'),0);e.dataTransfer.effectAllowed='move';}}}});
-document.addEventListener('dragend',e=>{{if(e.target.classList.contains('card'))e.target.classList.remove('dragging');}});
-document.querySelectorAll('.dz').forEach(z=>{{
-  z.addEventListener('dragover',e=>{{e.preventDefault();z.classList.add('over');}});
-  z.addEventListener('dragleave',e=>{{if(!z.contains(e.relatedTarget))z.classList.remove('over');}});
-  z.addEventListener('drop',e=>{{
-    e.preventDefault();z.classList.remove('over');
-    if(dc){{const id=dc.getAttribute('data-id'),ov=dc.getAttribute('data-status'),nv=z.getAttribute('data-status');
-      if(ov!==nv){{dc.setAttribute('data-status',nv);z.appendChild(dc);mv(id,nv);}}}}
-  }});
-}});
 </script></body></html>'''
 
 components.html(

pages/exp.py

@@ -8,6 +8,22 @@ from gs_client import read_ws
 
 st.set_page_config(layout="wide", initial_sidebar_state="collapsed", page_title="PMJA - Dashboard Expedição")
 
+st.markdown("""<style>
+#MainMenu,footer,header,[data-testid="stToolbar"],[data-testid="stDecoration"],
+[data-testid="stStatusWidget"]{display:none!important}
+.block-container,.element-container,.stMarkdown{padding:0!important;margin:0!important;max-width:100%!important}
+iframe{position:fixed!important;top:0!important;left:0!important;
+       width:100vw!important;height:100dvh!important;border:none!important;z-index:9999!important}
+[data-testid="stHorizontalBlock"]{gap:0!important;margin:0!important;padding:0!important;
+    height:0!important;overflow:visible!important}
+.main,[data-testid="stAppViewContainer"]{background:#f5f7fa!important}
+@media(max-width:900px){
+  iframe{position:static!important;width:100%!important;height:7500px!important;z-index:1!important}
+  .main,[data-testid="stAppViewContainer"]{overflow-y:auto!important;height:auto!important}
+  .block-container{height:auto!important}
+}
+</style>""", unsafe_allow_html=True)
+
 # ── SESSION ───────────────────────────────────────────────────────────
 _cc = CookieController()
 COOKIE_NAME = "pmja_session"
@@ -38,38 +54,71 @@ if time.time() - st.session_state.inicio_exibicao >= 120:
     st.session_state.inicio_exibicao = time.time()
     st.switch_page("pages/full.py")
 
-st.markdown("""<style>
-#MainMenu,footer,header,[data-testid="stToolbar"],[data-testid="stDecoration"],
-[data-testid="stStatusWidget"]{display:none!important}
-.block-container,.element-container,.stMarkdown{padding:0!important;margin:0!important;max-width:100%!important}
-iframe{position:fixed!important;top:0!important;left:0!important;
-       width:100vw!important;height:100dvh!important;border:none!important;z-index:9999!important}
-[data-testid="stHorizontalBlock"]{gap:0!important;margin:0!important;padding:0!important;
-    height:0!important;overflow:visible!important}
-.main,[data-testid="stAppViewContainer"]{background:#f5f7fa!important}
-@media(max-width:900px){
-  iframe{position:static!important;width:100%!important;height:7500px!important;z-index:1!important}
-  .main,[data-testid="stAppViewContainer"]{overflow-y:auto!important;height:auto!important}
-  .block-container{height:auto!important}
-}
-</style>""", unsafe_allow_html=True)
+# ── LOADING ───────────────────────────────────────────────────────────
+loading_placeholder = st.empty()
+loading_placeholder.markdown("""
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700;800&family=Sora:wght@800&display=swap" rel="stylesheet">
+<style>
+#ld{position:fixed;inset:0;z-index:999999;background:linear-gradient(135deg,#003a70,#0056A3);
+  display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif}
+#ld .lg{display:flex;align-items:center;gap:24px;margin-bottom:36px}
+#ld img{height:34px;filter:brightness(0) invert(1);opacity:.9}
+#ld .dv{width:1px;height:32px;background:rgba(255,255,255,.25)}
+#ld h2{font-family:'Sora',sans-serif;font-size:clamp(15px,4vw,21px);color:#fff;font-weight:800;margin-bottom:4px;text-align:center}
+#ld p{font-size:clamp(11px,3vw,13px);color:rgba(255,255,255,.7);font-weight:600;margin-bottom:40px;text-align:center}
+#ld .sp{width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;
+  border-radius:50%;animation:sp .8s linear infinite;margin-bottom:24px}
+@keyframes sp{to{transform:rotate(360deg)}}
+#ld .bw{width:min(260px,70vw);height:4px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;margin-bottom:14px}
+#ld .bf{height:100%;width:0%;background:#fff;border-radius:99px;transition:width .4s ease}
+#ld .st{font-size:11px;color:rgba(255,255,255,.6);font-weight:600;text-align:center}
+#ld .dt span{animation:dt 1.2s infinite;opacity:0}
+#ld .dt span:nth-child(2){animation-delay:.2s}
+#ld .dt span:nth-child(3){animation-delay:.4s}
+@keyframes dt{0%,100%{opacity:0}50%{opacity:1}}
+</style>
+<div id="ld">
+  <div class="lg">
+    <img src="https://companieslogo.com/img/orig/AZ2.F-d26946db.png?t=1720244490">
+    <div class="dv"></div>
+    <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Logo-engie.svg">
+  </div>
+  <div class="sp"></div>
+  <h2>PMJA — Dashboard Expedição</h2>
+  <p>Gestão de Materiais</p>
+  <div class="bw"><div class="bf" id="ldbf"></div></div>
+  <div class="st" id="ldst">Conectando ao Google Sheets<span class="dt"><span>.</span><span>.</span><span>.</span></span></div>
+</div>
+<script>
+(function(){
+  var s=[{p:18,m:'Conectando ao Google Sheets'},{p:40,m:'Carregando dados de expedição'},
+         {p:62,m:'Processando métricas'},{p:80,m:'Montando gráficos'},{p:95,m:'Quase pronto'}];
+  var i=0;
+  function n(){
+    if(i>=s.length)return;
+    var x=s[i++];
+    var b=document.getElementById('ldbf'),t=document.getElementById('ldst');
+    if(b)b.style.width=x.p+'%';
+    if(t)t.innerHTML=x.m+'<span class="dt"><span>.</span><span>.</span><span>.</span></span>';
+    setTimeout(n,950+Math.random()*550);
+  }
+  setTimeout(n,300);
+})();
+</script>
+""", unsafe_allow_html=True)
+
+# ── LOAD DATA ─────────────────────────────────────────────────────────
+df_exp_raw = read_ws("exp_dados")
+loading_placeholder.empty()
 
 # ── HELPERS ───────────────────────────────────────────────────────────
 def fmt(n):
     if pd.isna(n): return "0"
-    return f"{int(n):,}".replace(',', '.')
-
-def fix_df(df):
-    for col in df.columns:
-        if df[col].dtype == 'object':
-            num = pd.to_numeric(df[col], errors='coerce')
-            df[col] = num if num.notna().sum() == df[col].notna().sum() \
-                      else df[col].fillna('').astype(str).replace('nan', '')
-    return df
+    return "{:,}".format(int(n)).replace(',', '.')
 
 def extrair_categoria(col):
-    for s in [' Requisições', ' Requisiçoes', ' Unid. Itens', ' Unid Itens',
-              ' Itens por unidade', ' Items por unidade']:
+    for s in [' Requisições',' Requisiçoes',' Unid. Itens',' Unid Itens',
+              ' Itens por unidade',' Items por unidade']:
         col = col.replace(s, '')
     return col.strip()
 
@@ -82,90 +131,75 @@ def proc_exp(df_raw):
     df = df.dropna(subset=['data']).copy()
     df['ano']     = df['data'].dt.year
     df['mes_num'] = df['data'].dt.month
-
     req, unid, itens = [], [], []
     for col in df.columns:
-        c = col.lower().strip().replace('.', '').replace('  ', ' ')
+        c = col.lower().strip().replace('.','').replace('  ',' ')
         if 'requisi' in c and 'unid' not in c and 'por' not in c: req.append(col)
         if 'unid' in c and 'iten' in c and 'por' not in c:        unid.append(col)
         if 'iten' in c and 'por' in c and 'unid' in c:            itens.append(col)
-
-    for col in req + unid + itens:
-        if col in df.columns:
-            df[col] = pd.to_numeric(df[col], errors='coerce').fillna(0)
-
+    for col in req+unid+itens:
+        if col in df.columns: df[col] = pd.to_numeric(df[col], errors='coerce').fillna(0)
     df['qtd_requisicoes']       = df[req].sum(axis=1)
     df['qtd_unidades_emitidas'] = df[unid].sum(axis=1)
     df['qtd_itens_total']       = df[itens].sum(axis=1) if itens else 0
-
-    df_final = df[['mes_num', 'ano', 'qtd_requisicoes',
-                   'qtd_unidades_emitidas', 'qtd_itens_total']].sort_values(['ano','mes_num']).reset_index(drop=True)
-    df_det   = df[['mes_num', 'ano'] + req + unid + itens].sort_values(['ano','mes_num']).reset_index(drop=True)
+    df_final = df[['mes_num','ano','qtd_requisicoes','qtd_unidades_emitidas','qtd_itens_total']]\
+               .sort_values(['ano','mes_num']).reset_index(drop=True)
+    df_det = df[['mes_num','ano']+req+unid+itens]\
+             .sort_values(['ano','mes_num']).reset_index(drop=True)
     return df_final, df_det, req, unid, itens
 
 # ── BUILD FRAMES ──────────────────────────────────────────────────────
 def build_frames(df_plot, df_det, req_cols, unid_cols, itens_cols, anos_unicos, mes_max, CORES_EXP):
     MESES_PT = {1:'Jan',2:'Fev',3:'Mar',4:'Abr',5:'Mai',6:'Jun',
                 7:'Jul',8:'Ago',9:'Set',10:'Out',11:'Nov',12:'Dez'}
-
     metricas_linha = [
-        {'col': 'qtd_requisicoes',       'cores': ['#001a33','#003366','#004d99','#0066cc']},
-        {'col': 'qtd_unidades_emitidas', 'cores': ['#003d66','#005a9c','#0077cc','#3399dd']},
-        {'col': 'qtd_itens_total',       'cores': ['#0056A3','#0075be','#3399dd','#66b3ee']},
+        {'col':'qtd_requisicoes',      'cores':['#001f3f','#0056A3','#00a8e8','#7ecfef']},
+        {'col':'qtd_unidades_emitidas','cores':['#001f3f','#0056A3','#00a8e8','#7ecfef']},
+        {'col':'qtd_itens_total',      'cores':['#001f3f','#0056A3','#00a8e8','#7ecfef']},
     ]
-    tipos_l1 = ['barra_h', 'barra_v', 'linha']
-
+    tipos_l1 = ['barra_h','barra_v','linha']
     frames = []
-    for mes_atual in range(1, mes_max + 1):
+    for mes_atual in range(1, mes_max+1):
         frame = {"mes": mes_atual, "cards": {}, "linha1": [], "linha2": []}
-
         df_ate     = df_plot[df_plot['mes_num'] <= mes_atual]
         df_det_ate = df_det[df_det['mes_num'] <= mes_atual]
-
-        # cards
         for col, tit, cor, suf in [
-            ('qtd_requisicoes',       'Requisições',       '#003a70', ''),
-            ('qtd_unidades_emitidas', 'Unidades Emitidas', '#005a9c', ''),
-            ('qtd_itens_total',       'Total de Itens',    '#0075be', ''),
+            ('qtd_requisicoes',      'Requisições',      '#003a70',''),
+            ('qtd_unidades_emitidas','Unidades Emitidas','#005a9c',''),
+            ('qtd_itens_total',      'Total de Itens',   '#0075be',''),
         ]:
             frame["cards"][col] = {"valor": fmt(df_ate[col].sum()), "cor": cor, "titulo": tit, "sufixo": suf}
-
-        # linha1
         meses_ex = sorted(df_plot[df_plot['mes_num'] <= mes_atual]['mes_num'].unique())
         for idx_m, cfg in enumerate(metricas_linha):
             col    = cfg['col']
             traces = []
             for idx_ano, ano in enumerate(anos_unicos):
-                d = df_plot[(df_plot['ano'] == ano) & (df_plot['mes_num'] <= mes_atual)].sort_values('mes_num')
+                d = df_plot[(df_plot['ano']==ano)&(df_plot['mes_num']<=mes_atual)].sort_values('mes_num')
                 if d.empty: continue
                 cor = cfg['cores'][idx_ano % len(cfg['cores'])]
                 vals, texts = [], []
                 for m in meses_ex:
-                    row = d[d['mes_num'] == m]
+                    row = d[d['mes_num']==m]
                     v   = float(row[col].iloc[0]) if not row.empty else 0.0
-                    vals.append(v)
-                    texts.append(fmt(v) if v > 0 else "")
+                    vals.append(v); texts.append(fmt(v) if v > 0 else "")
                 traces.append({
                     "ano": str(ano), "cor": cor,
                     "meses": meses_ex, "y": vals, "text": texts,
-                    "fill_rgba": f"rgba({int(cor[1:3],16)},{int(cor[3:5],16)},{int(cor[5:7],16)},0.1)"
+                    "fill_rgba": "rgba({},{},{},0.1)".format(int(cor[1:3],16),int(cor[3:5],16),int(cor[5:7],16))
                 })
             frame["linha1"].append({"tipo": tipos_l1[idx_m], "traces": traces, "meses_ex": meses_ex})
-
-        # linha2: sistemas
-        grupos = [
+        for grp in [
             {'cols': req_cols,   'tipo': 'donut'},
             {'cols': unid_cols,  'tipo': 'linha_sis'},
             {'cols': itens_cols, 'tipo': 'barv_sis'},
-        ]
-        for grp in grupos:
+        ]:
             totais = {}
             for c in grp['cols']:
                 cat = extrair_categoria(c)
                 if cat not in totais:
                     totais[cat] = {'v': 0.0, 'cor': CORES_EXP[len(totais) % len(CORES_EXP)]}
                 totais[cat]['v'] += float(df_det_ate[c].sum()) if c in df_det_ate.columns else 0.0
-            dados = sorted([(k, v) for k, v in totais.items() if v['v'] > 0],
+            dados = sorted([(k,v) for k,v in totais.items() if v['v']>0],
                            key=lambda x: x[1]['v'], reverse=True)
             frame["linha2"].append({
                 "tipo":   grp['tipo'],
@@ -173,62 +207,49 @@ def build_frames(df_plot, df_det, req_cols, unid_cols, itens_cols, anos_unicos,
                 "valores":[d[1]['v'] for d in dados],
                 "cores":  [d[1]['cor'] for d in dados],
             })
-
         frames.append(frame)
     return frames
 
-# ── LOAD DATA ─────────────────────────────────────────────────────────
-with st.spinner('📊 Carregando dados...'):
-    df_exp_raw = read_ws("exp_dados")   # ← gs_client (era: load_ws("exp_dados"))
-
+# ── MAIN ──────────────────────────────────────────────────────────────
 result = proc_exp(df_exp_raw) if df_exp_raw is not None and not df_exp_raw.empty else None
 
 if result is not None:
     df_expedicao, df_det, req_cols, unid_cols, itens_cols = result
-
-    for col in ['qtd_requisicoes', 'qtd_unidades_emitidas', 'qtd_itens_total']:
+    for col in ['qtd_requisicoes','qtd_unidades_emitidas','qtd_itens_total']:
         df_expedicao[col] = pd.to_numeric(df_expedicao[col], errors='coerce').fillna(0)
-
     mes_max     = int(df_expedicao['mes_num'].max())
     anos_unicos = sorted(df_expedicao['ano'].unique())
-
-    CORES_EXP = ['#001a33','#002d4d','#003d66','#004d80','#005d99',
-                 '#006db3','#007dcc','#1a8dd4','#3399dd','#4da6e6',
-                 '#66b3ee','#80c0f5','#99ccff','#b3d9ff']
-
+    CORES_EXP = ['#001a33','#002d4d','#003d66','#004d80','#005d99','#006db3',
+                 '#007dcc','#1a8dd4','#3399dd','#4da6e6','#66b3ee','#80c0f5','#99ccff','#b3d9ff']
     MESES_PT = {1:'Jan',2:'Fev',3:'Mar',4:'Abr',5:'Mai',6:'Jun',
                 7:'Jul',8:'Ago',9:'Set',10:'Out',11:'Nov',12:'Dez'}
-
     metricas_cfg = [
-        {'col':'qtd_requisicoes',       'cores':['#001a33','#003366','#004d99','#0066cc'], 'suf':''},
-        {'col':'qtd_unidades_emitidas', 'cores':['#003d66','#005a9c','#0077cc','#3399dd'], 'suf':''},
-        {'col':'qtd_itens_total',       'cores':['#0056A3','#0075be','#3399dd','#66b3ee'], 'suf':''},
+        {'col':'qtd_requisicoes',      'cores':['#001f3f','#0056A3','#00a8e8','#7ecfef'],'suf':''},
+        {'col':'qtd_unidades_emitidas','cores':['#001f3f','#0056A3','#00a8e8','#7ecfef'],'suf':''},
+        {'col':'qtd_itens_total',      'cores':['#001f3f','#0056A3','#00a8e8','#7ecfef'],'suf':''},
     ]
 
     def sub_anos(cfg):
         parts = []
         for i, ano in enumerate(anos_unicos):
             cor   = cfg['cores'][i % len(cfg['cores'])]
-            total = fmt(df_expedicao[df_expedicao['ano'] == ano][cfg['col']].sum())
-            parts.append(f"<span style='color:{cor};font-weight:700'>{ano}: {total}{cfg['suf']}</span>")
+            total = fmt(df_expedicao[df_expedicao['ano']==ano][cfg['col']].sum())
+            parts.append("<span style='color:{};font-weight:700'>{}: {}{}</span>".format(cor, ano, total, cfg['suf']))
         return " <span style='color:#666'>|</span> ".join(parts)
 
     def sub_sistemas(cols):
         totais = {}
         for c in cols:
             cat = extrair_categoria(c)
-            if cat not in totais:
-                totais[cat] = {'v': 0.0, 'cor': CORES_EXP[len(totais) % len(CORES_EXP)]}
+            if cat not in totais: totais[cat] = {'v':0.0,'cor':CORES_EXP[len(totais)%len(CORES_EXP)]}
             totais[cat]['v'] += float(df_det[c].sum()) if c in df_det.columns else 0.0
-        dados = sorted([(k, v) for k, v in totais.items() if v['v'] > 0],
+        dados = sorted([(k,v) for k,v in totais.items() if v['v']>0],
                        key=lambda x: x[1]['v'], reverse=True)
-        parts = []
-        for d in dados:
-            parts.append(f"<span style='color:{d[1]['cor']};font-weight:700'>{d[0]}: {fmt(d[1]['v'])}</span>")
-        return " <span style='color:#666'>|</span> ".join(parts)
+        return " <span style='color:#666'>|</span> ".join(
+            ["<span style='color:{};font-weight:700'>{}: {}</span>".format(d[1]['cor'], d[0], fmt(d[1]['v']))
+             for d in dados])
 
-    frames = build_frames(df_expedicao, df_det, req_cols, unid_cols, itens_cols,
-                          anos_unicos, mes_max, CORES_EXP)
+    frames = build_frames(df_expedicao, df_det, req_cols, unid_cols, itens_cols, anos_unicos, mes_max, CORES_EXP)
 
     import numpy as np
     class NpEncoder(json.JSONEncoder):
@@ -238,72 +259,77 @@ if result is not None:
             if isinstance(obj, np.ndarray): return obj.tolist()
             return super().default(obj)
 
-    frames_json  = json.dumps(frames, cls=NpEncoder, ensure_ascii=False)
-    meses_json   = json.dumps(MESES_PT)
-    TITULOS_L1   = ['Requisições', 'Unidades Emitidas', 'Total de Itens']
-    TITULOS_L2   = ['Requisições por Sistema', 'Unidades Emitidas por Sistema', 'Total de Itens por Sistema']
-    subs_l1      = [sub_anos(c) for c in metricas_cfg]
-    subs_l2      = [sub_sistemas(req_cols), sub_sistemas(unid_cols), sub_sistemas(itens_cols)]
+    frames_json = json.dumps(frames, cls=NpEncoder, ensure_ascii=False)
+    meses_json  = json.dumps(MESES_PT)
+    TITULOS_L1  = ['Requisições','Unidades Emitidas','Total de Itens']
+    TITULOS_L2  = ['Requisições por Sistema','Unidades Emitidas por Sistema','Total de Itens por Sistema']
+    subs_l1     = [sub_anos(c) for c in metricas_cfg]
+    subs_l2     = [sub_sistemas(req_cols), sub_sistemas(unid_cols), sub_sistemas(itens_cols)]
 
-    html = f"""<!DOCTYPE html><html><head>
+    html = """<!DOCTYPE html>
+<html>
+<head>
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
-<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=DM+Sans:opsz,wght@9..40,400;9..40,600;9..40,700;9..40,800&family=Sora:wght@700;800;900&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Sora:wght@700;800;900&display=swap" rel="stylesheet">
 <script src="https://cdn.plot.ly/plotly-2.27.0.min.js" charset="utf-8"></script>
 <style>
-*{{margin:0;padding:0;box-sizing:border-box}}
-html,body{{width:100%;height:100%;overflow:hidden;
+* { margin:0; padding:0; box-sizing:border-box; }
+html, body { width:100%; height:100%; overflow:hidden;
   background:linear-gradient(135deg,#f5f7fa 0%,#e8eef5 100%);
-  font-family:'DM Sans',sans-serif;}}
-.root{{display:grid;width:100%;height:100dvh;gap:3px;padding:4px;overflow:hidden;
-  grid-template-rows:auto auto 1fr 1fr;}}
-.hdr{{background:linear-gradient(135deg,#003a70 0%,#0056A3 100%);
-  border-radius:8px;padding:4px 14px;display:flex;align-items:center;justify-content:space-between;
-  box-shadow:0 4px 12px rgba(0,58,112,.12);}}
-.logo{{height:clamp(22px,3.2dvh,36px);filter:brightness(0) invert(1);opacity:.92}}
-.ht{{font-family:'Sora',sans-serif;font-size:clamp(12px,1.8dvh,20px);color:#fff;font-weight:800;letter-spacing:-.5px}}
-.hs{{font-family:'DM Sans',sans-serif;font-size:clamp(9px,1.2dvh,14px);color:rgba(255,255,255,.9);font-weight:700}}
-.cards{{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;}}
-.mc{{background:linear-gradient(135deg,#ffffff 0%,#f8fafd 100%);
-  border-radius:8px;padding:clamp(4px,.6dvh,10px) clamp(6px,.7vw,14px);
-  border-left:4px solid;box-shadow:0 2px 12px rgba(0,58,112,.08);overflow:hidden;
-  transition:box-shadow .2s;}}
-.mc:hover{{box-shadow:0 4px 18px rgba(0,58,112,.14);}}
-.ml{{font-family:'DM Sans',sans-serif;font-size:clamp(7px,.85dvh,11px);color:#666;
-  font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px;white-space:nowrap;}}
-.mv{{font-family:'Sora',sans-serif;font-size:clamp(13px,2dvh,26px);
-  font-weight:800;line-height:1;white-space:nowrap;}}
-.row3{{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;min-height:0;}}
-.cb{{background:white;border-radius:10px;
+  font-family:'DM Sans',sans-serif; }
+.root { display:grid; width:100%; height:100dvh; gap:3px; padding:4px; overflow:hidden;
+  grid-template-rows:auto auto 1fr 1fr; }
+.hdr { background:linear-gradient(135deg,#003a70 0%,#0056A3 100%);
+  border-radius:8px; padding:4px 14px; display:flex; align-items:center;
+  justify-content:space-between; box-shadow:0 4px 12px rgba(0,58,112,.12); }
+.logo { height:clamp(22px,3.2dvh,36px); filter:brightness(0) invert(1); opacity:.92; }
+.ht { font-family:'Sora',sans-serif; font-size:clamp(12px,1.8dvh,20px);
+  color:#fff; font-weight:800; letter-spacing:-.5px; }
+.hs { font-family:'DM Sans',sans-serif; font-size:clamp(9px,1.2dvh,14px);
+  color:rgba(255,255,255,.9); font-weight:700; }
+.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
+.mc { background:linear-gradient(135deg,#ffffff 0%,#f8fafd 100%);
+  border-radius:8px; padding:clamp(4px,.6dvh,10px) clamp(6px,.7vw,14px);
+  border-left:4px solid; box-shadow:0 2px 12px rgba(0,58,112,.08); overflow:hidden; }
+.ml { font-family:'DM Sans',sans-serif; font-size:clamp(7px,.85dvh,11px);
+  color:#666; font-weight:700; text-transform:uppercase;
+  letter-spacing:.3px; margin-bottom:2px; white-space:nowrap; }
+.mv { font-family:'Sora',sans-serif; font-size:clamp(13px,2dvh,26px);
+  font-weight:800; line-height:1; white-space:nowrap; }
+.row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; min-height:0; }
+.cb { background:white; border-radius:10px;
   box-shadow:0 2px 12px rgba(0,58,112,.07),0 1px 3px rgba(0,58,112,.04);
-  overflow:visible;min-height:0;display:flex;flex-direction:column;
-  border:1px solid rgba(0,58,112,.04);}}
-.ct{{background:linear-gradient(180deg,#fafbfd 0%,#ffffff 100%);
-  padding:4px 8px 3px;border-radius:10px 10px 0 0;
-  border-bottom:1px solid #eef1f6;flex-shrink:0;}}
-.ct-title{{font-family:'Sora',sans-serif;font-size:clamp(9px,1.15dvh,15px);
-  color:#1a1a1a;font-weight:800;text-align:center;}}
-.ct-sub{{text-align:center;font-size:clamp(7px,.8dvh,10px);font-weight:700;
-  margin-top:1px;line-height:1.3;font-family:'DM Sans',sans-serif;}}
-.cp{{flex:1;min-height:0;overflow:visible;}}
-@media(max-width:900px){{
-  html,body{{overflow-y:auto!important;height:auto!important}}
-  .root{{height:auto!important;overflow:visible!important;grid-template-rows:auto!important}}
-  .cards{{grid-template-columns:repeat(3,1fr)!important}}
-  .row3{{grid-template-columns:repeat(2,1fr)!important;min-height:200px}}
-  .cb{{min-height:220px!important}}
-  .cp{{min-height:180px!important}}
-}}
-@media(max-width:600px){{
-  .cards{{grid-template-columns:1fr 1fr!important}}
-  .row3{{grid-template-columns:1fr!important}}
-  .cb{{min-height:200px!important}}
-  .hs{{display:none}}
-  .hdr{{padding:4px 8px!important}}
-}}
+  overflow:visible; min-height:0; display:flex; flex-direction:column;
+  border:1px solid rgba(0,58,112,.04); }
+.ct { background:linear-gradient(180deg,#fafbfd 0%,#ffffff 100%);
+  padding:4px 8px 3px; border-radius:10px 10px 0 0;
+  border-bottom:1px solid #eef1f6; flex-shrink:0; }
+.ct-title { font-family:'Sora',sans-serif; font-size:clamp(9px,1.15dvh,15px);
+  color:#1a1a1a; font-weight:800; text-align:center; }
+.ct-sub { text-align:center; font-size:clamp(7px,.8dvh,10px);
+  font-weight:700; margin-top:1px; line-height:1.3; font-family:'DM Sans',sans-serif; }
+.cp { flex:1; min-height:0; overflow:visible; }
+@media(max-width:900px){
+  html,body { overflow:hidden!important; }
+  .root { height:100dvh!important; overflow:hidden!important; }
+  .cards { grid-template-columns:repeat(3,1fr)!important; }
+  .row3 { grid-template-columns:repeat(2,1fr)!important; }
+  .cb { min-height:0!important; }
+  .cp { min-height:0!important; }
+}
+@media(max-width:600px){
+  html,body { overflow-y:auto!important; height:auto!important; }
+  .root { height:auto!important; overflow:visible!important; grid-template-rows:auto!important; }
+  .cards { grid-template-columns:1fr 1fr!important; }
+  .row3 { grid-template-columns:1fr!important; }
+  .cb { height:260px!important; }
+  .cp { height:210px!important; flex:none!important; }
+  .hs { display:none; }
+  .hdr { padding:4px 8px!important; }
+}
 </style>
-</head><body>
+</head>
+<body>
 <div class="root">
   <div class="hdr">
     <img class="logo" src="https://companieslogo.com/img/orig/AZ2.F-d26946db.png?t=1720244490" alt="AZ">
@@ -317,389 +343,448 @@ html,body{{width:100%;height:100%;overflow:hidden;
   <div class="row3" id="row1"></div>
   <div class="row3" id="row2"></div>
 </div>
-
 <script>
-var FRAMES     = {frames_json};
-var MESES      = {meses_json};
-var TITULOS_L1 = {json.dumps(TITULOS_L1)};
-var TITULOS_L2 = {json.dumps(TITULOS_L2)};
-var SUBS_L1    = {json.dumps(subs_l1)};
-var SUBS_L2    = {json.dumps(subs_l2)};
+var FRAMES     = __FRAMES__;
+var MESES      = __MESES__;
+var TITULOS_L1 = __TITULOS_L1__;
+var TITULOS_L2 = __TITULOS_L2__;
+var SUBS_L1    = __SUBS_L1__;
+var SUBS_L2    = __SUBS_L2__;
 
 var CARDS_CFG = [
-  {{col:'qtd_requisicoes',       titulo:'Requisições',       cor:'#003a70', sufixo:''}},
-  {{col:'qtd_unidades_emitidas', titulo:'Unidades Emitidas', cor:'#005a9c', sufixo:''}},
-  {{col:'qtd_itens_total',       titulo:'Total de Itens',    cor:'#0075be', sufixo:''}},
+  {col:'qtd_requisicoes',       titulo:'Requisições',       cor:'#003a70', sufixo:''},
+  {col:'qtd_unidades_emitidas', titulo:'Unidades Emitidas', cor:'#005a9c', sufixo:''},
+  {col:'qtd_itens_total',       titulo:'Total de Itens',    cor:'#0075be', sufixo:''}
 ];
 
-var FRAME_MS = 700;
-var PAUSE_MS = 60000;
-var frameIdx = 0, animTimer = null, cdownTimer = null;
-var initialized = {{}};
+var FRAME_MS  = 700;
+var PAUSE_MS  = 60000;
+var frameIdx  = 0;
+var animTimer = null;
+var cdownTimer= null;
+var inited    = {};
 
-function buildDOM() {{
+function buildDOM() {
   var cr = document.getElementById('cards-row');
-  CARDS_CFG.forEach(function(c) {{
+  CARDS_CFG.forEach(function(c) {
     cr.innerHTML += '<div class="mc" style="border-left-color:'+c.cor+'">'
-      +'<div class="ml">'+c.titulo+'</div>'
-      +'<div class="mv" id="mv_'+c.col+'" style="color:'+c.cor+'">0</div></div>';
-  }});
+      + '<div class="ml">'+c.titulo+'</div>'
+      + '<div class="mv" id="mv_'+c.col+'" style="color:'+c.cor+'">0</div></div>';
+  });
   var r1 = document.getElementById('row1');
-  for(var i=0;i<3;i++) {{
+  for (var i=0; i<3; i++) {
     r1.innerHTML += '<div class="cb"><div class="ct">'
-      +'<div class="ct-title">'+TITULOS_L1[i]+'</div>'
-      +'<div class="ct-sub">'+SUBS_L1[i]+'</div></div>'
-      +'<div class="cp" id="l1_'+i+'"></div></div>';
-  }}
+      + '<div class="ct-title">'+TITULOS_L1[i]+'</div>'
+      + '<div class="ct-sub">'+SUBS_L1[i]+'</div></div>'
+      + '<div class="cp" id="l1_'+i+'"></div></div>';
+  }
   var r2 = document.getElementById('row2');
-  for(var i=0;i<3;i++) {{
+  for (var i=0; i<3; i++) {
     r2.innerHTML += '<div class="cb"><div class="ct">'
-      +'<div class="ct-title">'+TITULOS_L2[i]+'</div>'
-      +'<div class="ct-sub">'+SUBS_L2[i]+'</div></div>'
-      +'<div class="cp" id="l2_'+i+'"></div></div>';
-  }}
-}}
+      + '<div class="ct-title">'+TITULOS_L2[i]+'</div>'
+      + '<div class="ct-sub">'+SUBS_L2[i]+'</div></div>'
+      + '<div class="cp" id="l2_'+i+'"></div></div>';
+  }
+}
 
-function gsize(id) {{
+function gsize(id) {
   var el = document.getElementById(id);
-  if(!el) return [200,150];
+  if (!el) return [200,150];
   return [el.clientWidth||200, el.clientHeight||150];
-}}
+}
+
 var tickvals = Object.keys(MESES).map(Number);
-var ticktext  = Object.values(MESES);
-
-function fmtDot(v) {{
-  var n=Math.round(v); if(n===0) return '0';
-  return n.toString().replace(/\\B(?=(\\d{{3}})+(?!\\d))/g,'.');
-}}
-
-function renderBarH(item, elId) {{
-  var wh=gsize(elId), el=document.getElementById(elId);
-  var meses=item.meses_ex||[], data=[];
-  var yOrder=meses.map(function(m){{return MESES[m];}}).slice().reverse();
-  var maxVal=0;
-  item.traces.forEach(function(t){{t.y.forEach(function(v){{if(v>maxVal)maxVal=v;}});}});
-  item.traces.forEach(function(t) {{
-    var yV=t.y.slice().reverse();
-    data.push({{type:'bar',orientation:'h',name:t.ano,
-      x:yV,y:yOrder,
-      text:yV.map(function(){{return '';}}),
-      marker:{{color:t.cor,line:{{color:'white',width:1}}}},
-      hovertemplate:'<b>'+t.ano+' - %{{y}}</b><br>%{{x:,.0f}}<extra></extra>'}});
-  }});
-  var annotations=[];
-  var accum=[];
-  yOrder.forEach(function(){{accum.push(0);}});
-  item.traces.forEach(function(t) {{
-    var yV=t.y.slice().reverse();
-    yV.forEach(function(v,i) {{
-      if(!v){{accum[i]+=(v||0);return;}}
-      var xStart=accum[i];
-      var segW=v;
-      var minInside=maxVal*0.10;
-      var inside=segW>=minInside;
-      annotations.push({{
-        x: inside ? xStart+segW/2 : xStart+segW+maxVal*0.015,
+var ticktext = Object.values(MESES);
+
+function fmtDot(v) {
+  var n = Math.round(v);
+  if (n===0) return '0';
+  var s=n.toString(), r='', c=0;
+  for (var i=s.length-1; i>=0; i--) {
+    if (c>0 && c%3===0) r='.'+r;
+    r=s[i]+r; c++;
+  }
+  return r;
+}
+
+function renderBarH(item, elId) {
+  var wh    = gsize(elId);
+  var el    = document.getElementById(elId);
+  var meses = item.meses_ex || [];
+  var data  = [];
+  var yOrder = meses.map(function(m){ return MESES[m]; }).slice().reverse();
+  var maxVal = 0;
+  item.traces.forEach(function(t){ t.y.forEach(function(v){ if(v>maxVal) maxVal=v; }); });
+  item.traces.forEach(function(t) {
+    var yV = t.y.slice().reverse();
+    data.push({
+      type:'bar', orientation:'h', name:t.ano,
+      x:yV, y:yOrder,
+      text:yV.map(function(){ return ''; }),
+      marker:{color:t.cor, line:{color:'white',width:1}},
+      hovertemplate:'<b>'+t.ano+' - %{y}</b><br>%{x:,.0f}<extra></extra>'
+    });
+  });
+  var annotations = [];
+  var accum = yOrder.map(function(){ return 0; });
+  item.traces.forEach(function(t) {
+    var yV = t.y.slice().reverse();
+    yV.forEach(function(v, i) {
+      if (!v) { accum[i]+=(v||0); return; }
+      var xStart = accum[i];
+      var inside = v >= maxVal*0.10;
+      annotations.push({
+        x: inside ? xStart+v/2 : xStart+v+maxVal*0.015,
         y: yOrder[i],
-        xref:'x',yref:'y',showarrow:false,
+        xref:'x', yref:'y', showarrow:false,
         xanchor: inside?'center':'left',
         yanchor:'middle',
         text:'<b>'+fmtDot(v)+'</b>',
-        font:{{size:11,family:'DM Sans',color: inside?'white':'#1e3a5f'}}
-      }});
-      accum[i]+=v;
-    }});
-  }});
-  var layout={{width:wh[0],height:wh[1],autosize:false,barmode:'stack',
-    template:'plotly_white',showlegend:false,font:{{family:'DM Sans',size:11}},
-    margin:{{l:70,r:56,t:8,b:18}},plot_bgcolor:'rgba(248,250,252,0.8)',
-    paper_bgcolor:'white',bargap:0.28,annotations:annotations,
-    xaxis:{{tickfont:{{size:9,family:'DM Sans',color:'#9ca3af'}},showgrid:true,
-      gridcolor:'rgba(200,200,200,0.25)',rangemode:'tozero',zeroline:false,range:[0,maxVal*1.25]}},
-    yaxis:{{tickfont:{{size:11,family:'DM Sans',color:'#374151'}},
-      showgrid:false,categoryorder:'array',categoryarray:yOrder,ticksuffix:'   '}},
-    hoverlabel:{{bgcolor:'white',font_size:12,font_family:'DM Sans'}}}};
-  if(!initialized[elId]){{Plotly.newPlot(el,data,layout,{{displayModeBar:false,responsive:false}});initialized[elId]=true;}}
-  else Plotly.react(el,data,layout);
-  roundBarsH(el);
-}}
-
-function roundBarsH(boxEl) {{
-  setTimeout(function() {{
-    boxEl.querySelectorAll('.bars path').forEach(function(p) {{
-      var d=p.getAttribute('d'); if(!d) return;
-      var segs=d.match(/[A-Za-z][^A-Za-z]*/g)||[],cx=0,cy=0,aX=[],aY=[];
-      segs.forEach(function(tok){{
-        var cmd=tok[0];
-        var pts=tok.slice(1).trim().split(/[\\s,]+/).map(Number).filter(function(n){{return !isNaN(n);}});
-        if(cmd==='M'||cmd==='L'){{aX.push(pts[0]);aY.push(pts[1]);cx=pts[0];cy=pts[1];}}
-        else if(cmd==='H'){{aX.push(pts[0]);aY.push(cy);cx=pts[0];}}
-        else if(cmd==='V'){{aX.push(cx);aY.push(pts[0]);cy=pts[0];}}
-      }});
-      if(aX.length<2) return;
-      var xLeft=Math.min.apply(null,aX),xRight=Math.max.apply(null,aX);
-      var yTop=Math.min.apply(null,aY),yBot=Math.max.apply(null,aY);
-      var w=xRight-xLeft,h=yBot-yTop;
-      if(w<4||h<2) return;
-      var r=Math.min(8,h/2);
-      var nd='M '+xLeft+','+yTop+' H '+(xRight-r)+' Q '+xRight+','+yTop+' '+xRight+','+(yTop+r)
-        +' V '+(yBot-r)+' Q '+xRight+','+yBot+' '+(xRight-r)+','+yBot+' H '+xLeft+' V '+yTop+' Z';
-      p.setAttribute('d',nd);
-    }});
-  }},80);
-}}
-
-function renderBarV(item, elId) {{
-  var wh=gsize(elId), el=document.getElementById(elId);
-  var meses=item.meses_ex||[], data=[];
-  var maxByMes={{}};
-  meses.forEach(function(m,mi){{var s=0;item.traces.forEach(function(t){{s+=t.y[mi]||0;}});maxByMes[mi]=s;}});
-  var globalMax=Math.max.apply(null,meses.map(function(_,mi){{return maxByMes[mi];}}));
-  var annotations=[];
-  meses.forEach(function(m,mi) {{
-    var tot=maxByMes[mi];
-    if(!tot) return;
-    annotations.push({{x:MESES[m],y:tot,xref:'x',yref:'y',showarrow:false,
+        font:{size:11,family:'DM Sans',color:inside?'white':'#1e3a5f'}
+      });
+      accum[i] += v;
+    });
+  });
+  var layout = {
+    width:wh[0], height:wh[1], autosize:true, barmode:'stack',
+    template:'plotly_white', showlegend:false, font:{family:'DM Sans',size:11},
+    margin:{l:70,r:56,t:8,b:18},
+    plot_bgcolor:'rgba(248,250,252,0.8)', paper_bgcolor:'white',
+    bargap:0.28, annotations:annotations,
+    xaxis:{tickfont:{size:9,family:'DM Sans',color:'#9ca3af'},
+      showgrid:true, gridcolor:'rgba(200,200,200,0.25)',
+      rangemode:'tozero', zeroline:false, range:[0,maxVal*1.25]},
+    yaxis:{tickfont:{size:11,family:'DM Sans',color:'#374151'},
+      showgrid:false, categoryorder:'array', categoryarray:yOrder, ticksuffix:'   '},
+    hoverlabel:{bgcolor:'white',font_size:12,font_family:'DM Sans'}
+  };
+  if (!inited[elId]) {
+    Plotly.newPlot(el, data, layout, {displayModeBar:false, responsive:true});
+    inited[elId] = true;
+  } else { Plotly.react(el, data, layout); }
+  roundBars(el, 8, 'h');
+}
+
+function renderBarV(item, elId) {
+  var wh    = gsize(elId);
+  var el    = document.getElementById(elId);
+  var meses = item.meses_ex || [];
+  var data  = [];
+  var maxByMes = {};
+  meses.forEach(function(m,mi) {
+    var s=0; item.traces.forEach(function(t){ s+=t.y[mi]||0; }); maxByMes[mi]=s;
+  });
+  var globalMax = Math.max.apply(null, meses.map(function(_,mi){ return maxByMes[mi]; }));
+  var annotations = [];
+  meses.forEach(function(m,mi) {
+    var tot = maxByMes[mi];
+    if (!tot) return;
+    annotations.push({x:MESES[m],y:tot,xref:'x',yref:'y',showarrow:false,
       yanchor:'bottom',xanchor:'center',yshift:5,
-      text:'<b>'+fmtDot(tot)+'</b>',font:{{size:11,family:'DM Sans',color:'#1e3a5f'}}}});
-  }});
-  var accumV=[];
-  meses.forEach(function(){{accumV.push(0);}});
-  item.traces.forEach(function(t) {{
-    var segAnnots=[];
-    t.y.forEach(function(v,mi) {{
-      if(v>0) {{
-        var yBase=accumV[mi];
-        var minH=globalMax*0.08;
-        if(v>=minH) {{
-          segAnnots.push({{x:MESES[meses[mi]],y:yBase+v/2,xref:'x',yref:'y',showarrow:false,
+      text:'<b>'+fmtDot(tot)+'</b>',font:{size:11,family:'DM Sans',color:'#1e3a5f'}});
+  });
+  var accumV = meses.map(function(){ return 0; });
+  item.traces.forEach(function(t) {
+    var segAnnots = [];
+    t.y.forEach(function(v,mi) {
+      if (v>0) {
+        var yBase = accumV[mi];
+        if (v >= globalMax*0.08) {
+          segAnnots.push({x:MESES[meses[mi]],y:yBase+v/2,xref:'x',yref:'y',showarrow:false,
             xanchor:'center',yanchor:'middle',
-            text:'<b>'+fmtDot(v)+'</b>',font:{{size:10,family:'DM Sans',color:'white'}}}});
-        }}
-        accumV[mi]+=v;
-      }} else {{accumV[mi]+=(v||0);}}
-    }});
-    segAnnots.forEach(function(a){{annotations.push(a);}});
-    data.push({{type:'bar',name:t.ano,
-      x:meses.map(function(m){{return MESES[m];}}),y:t.y,
-      text:t.y.map(function(){{return '';}}),
-      marker:{{color:t.cor,line:{{color:'white',width:1}}}},
-      hovertemplate:'<b>'+t.ano+' - %{{x}}</b><br>%{{y:,.0f}}<extra></extra>'}});
-  }});
-  var layout={{width:wh[0],height:wh[1],autosize:false,barmode:'stack',
-    template:'plotly_white',showlegend:false,font:{{family:'DM Sans',size:11}},
-    margin:{{l:34,r:16,t:30,b:32}},plot_bgcolor:'rgba(248,250,252,0.8)',
-    paper_bgcolor:'white',bargap:0.28,annotations:annotations,
-    xaxis:{{tickfont:{{size:11,family:'DM Sans',color:'#374151'}},showgrid:false,tickangle:0}},
-    yaxis:{{tickfont:{{size:9,family:'DM Sans',color:'#9ca3af'}},showgrid:true,
-      gridcolor:'rgba(200,200,200,0.25)',zeroline:false,range:[0,globalMax*1.20]}},
-    hoverlabel:{{bgcolor:'white',font_size:12,font_family:'DM Sans'}}}};
-  if(!initialized[elId]){{Plotly.newPlot(el,data,layout,{{displayModeBar:false,responsive:false}});initialized[elId]=true;}}
-  else Plotly.react(el,data,layout);
-  roundBarsV(el);
-}}
-
-function roundBarsV(boxEl) {{
-  setTimeout(function() {{
-    boxEl.querySelectorAll('.bars path').forEach(function(p) {{
-      var d=p.getAttribute('d'); if(!d) return;
-      var toks=d.match(/[A-Za-z][^A-Za-z]*/g)||[],cx=0,cy=0,aX=[],aY=[];
-      toks.forEach(function(tok){{
-        var cmd=tok[0];
-        var pts=tok.slice(1).trim().split(/[\\s,]+/).map(Number).filter(function(n){{return !isNaN(n);}});
-        if(cmd==='M'||cmd==='L'){{aX.push(pts[0]);aY.push(pts[1]);cx=pts[0];cy=pts[1];}}
-        else if(cmd==='H'){{aX.push(pts[0]);aY.push(cy);cx=pts[0];}}
-        else if(cmd==='V'){{aX.push(cx);aY.push(pts[0]);cy=pts[0];}}
-      }});
-      if(aX.length<2) return;
-      var x0=Math.min.apply(null,aX),x1=Math.max.apply(null,aX);
-      var yTop=Math.min.apply(null,aY),yBot=Math.max.apply(null,aY);
-      var w=x1-x0,h=yBot-yTop; if(w<2||h<4) return;
-      var r=Math.min(8,w/2);
-      var nd='M '+x0+','+yBot+' H '+x1+' V '+(yTop+r)
-        +' Q '+x1+','+yTop+' '+(x1-r)+','+yTop
-        +' H '+(x0+r)+' Q '+x0+','+yTop+' '+x0+','+(yTop+r)+' V '+yBot+' Z';
-      p.setAttribute('d',nd);
-    }});
-  }},80);
-}}
-
-function renderLine(item, elId) {{
-  var wh=gsize(elId), el=document.getElementById(elId);
-  var data=[], annotations=[], yshifts=[18,32,46,60];
-  item.traces.forEach(function(t,i) {{
-    data.push({{type:'scatter',mode:'lines+markers',x:t.meses,y:t.y,
-      line:{{width:3,color:t.cor,shape:'spline'}},
-      marker:{{size:8,color:t.cor,line:{{width:2,color:'white'}}}},
-      fill:i>0?'tonexty':null,fillcolor:t.fill_rgba,
-      cliponaxis:false,showlegend:false,name:t.ano,
-      hovertemplate:'<b>'+t.ano+' - %{{customdata}}</b><br>%{{y:,.0f}}<extra></extra>',
-      customdata:t.meses.map(function(m){{return MESES[m];}})
-    }});
-    var shift=yshifts[i%yshifts.length];
-    t.meses.forEach(function(mx,j) {{
-      if(!t.text[j]) return;
-      annotations.push({{x:mx,y:t.y[j],xref:'x',yref:'y',text:t.text[j],
+            text:'<b>'+fmtDot(v)+'</b>',font:{size:10,family:'DM Sans',color:'white'}});
+        }
+        accumV[mi] += v;
+      } else { accumV[mi]+=(v||0); }
+    });
+    segAnnots.forEach(function(a){ annotations.push(a); });
+    data.push({type:'bar',name:t.ano,
+      x:meses.map(function(m){ return MESES[m]; }), y:t.y,
+      text:t.y.map(function(){ return ''; }),
+      marker:{color:t.cor, line:{color:'white',width:1}},
+      hovertemplate:'<b>'+t.ano+' - %{x}</b><br>%{y:,.0f}<extra></extra>'});
+  });
+  var layout = {
+    width:wh[0], height:wh[1], autosize:true, barmode:'stack',
+    template:'plotly_white', showlegend:false, font:{family:'DM Sans',size:11},
+    margin:{l:34,r:16,t:30,b:32},
+    plot_bgcolor:'rgba(248,250,252,0.8)', paper_bgcolor:'white',
+    bargap:0.28, annotations:annotations,
+    xaxis:{tickfont:{size:11,family:'DM Sans',color:'#374151'},showgrid:false,tickangle:0},
+    yaxis:{tickfont:{size:9,family:'DM Sans',color:'#9ca3af'},showgrid:true,
+      gridcolor:'rgba(200,200,200,0.25)',zeroline:false,range:[0,globalMax*1.20]},
+    hoverlabel:{bgcolor:'white',font_size:12,font_family:'DM Sans'}
+  };
+  if (!inited[elId]) {
+    Plotly.newPlot(el, data, layout, {displayModeBar:false, responsive:true});
+    inited[elId] = true;
+  } else { Plotly.react(el, data, layout); }
+  roundBars(el, 8, 'v');
+}
+
+function renderLine(item, elId) {
+  var wh   = gsize(elId);
+  var el   = document.getElementById(elId);
+  var data = [], annotations = [], yshifts = [18,32,46,60];
+  item.traces.forEach(function(t, i) {
+    data.push({
+      type:'scatter', mode:'lines+markers',
+      x:t.meses, y:t.y,
+      line:{width:3, color:t.cor, shape:'spline'},
+      marker:{size:8, color:t.cor, line:{width:2,color:'white'}},
+      fill: i>0?'tonexty':null, fillcolor:t.fill_rgba,
+      cliponaxis:false, showlegend:false, name:t.ano,
+      hovertemplate:'<b>'+t.ano+' - %{customdata}</b><br>%{y:,.0f}<extra></extra>',
+      customdata:t.meses.map(function(m){ return MESES[m]; })
+    });
+    var shift = yshifts[i % yshifts.length];
+    t.meses.forEach(function(mx, j) {
+      if (!t.text[j]) return;
+      annotations.push({x:mx,y:t.y[j],xref:'x',yref:'y',text:t.text[j],
         showarrow:false,yshift:shift,
-        font:{{size:11,family:'DM Sans',color:'#1a1a1a'}},bgcolor:'rgba(0,0,0,0)'}});
-    }});
-  }});
-  var layout={{width:wh[0],height:wh[1],autosize:false,
-    hovermode:'x unified',template:'plotly_white',
-    font:{{family:'DM Sans',size:9}},showlegend:false,
-    margin:{{l:38,r:18,t:30,b:38}},plot_bgcolor:'rgba(248,249,250,0.5)',annotations:annotations,
-    xaxis:{{tickmode:'array',tickvals:tickvals,ticktext:ticktext,tickangle:0,
-      tickfont:{{size:9,family:'DM Sans'}},showgrid:true,gridcolor:'rgba(200,200,200,0.2)',ticklabelstandoff:8}},
-    yaxis:{{tickfont:{{size:9,family:'DM Sans'}},rangemode:'tozero',
-      showgrid:true,gridcolor:'rgba(200,200,200,0.2)'}},
-    hoverlabel:{{bgcolor:'white',font_size:11,font_family:'DM Sans'}}}};
-  if(!initialized[elId]){{Plotly.newPlot(el,data,layout,{{displayModeBar:false,responsive:false}});initialized[elId]=true;}}
-  else Plotly.react(el,data,layout);
-}}
-
-function renderDonut(item, elId) {{
-  if(!item.valores.length) return;
-  var wh=gsize(elId), el=document.getElementById(elId);
-  var total=item.valores.reduce(function(s,v){{return s+v;}},0);
-  var labels=item.labels.map(function(l,i) {{
-    var pct=total>0?(item.valores[i]/total*100).toFixed(1):'0.0';
+        font:{size:11,family:'DM Sans',color:'#1a1a1a'},bgcolor:'rgba(0,0,0,0)'});
+    });
+  });
+  var layout = {
+    autosize:true,
+    hovermode:'x unified', template:'plotly_white',
+    font:{family:'DM Sans',size:9}, showlegend:false,
+    margin:{l:38,r:18,t:30,b:38},
+    plot_bgcolor:'rgba(248,249,250,0.5)', annotations:annotations,
+    xaxis:{tickmode:'array',tickvals:tickvals,ticktext:ticktext,tickangle:0,
+      tickfont:{size:9,family:'DM Sans'},showgrid:true,
+      gridcolor:'rgba(200,200,200,0.2)',ticklabelstandoff:8},
+    yaxis:{tickfont:{size:9,family:'DM Sans'},rangemode:'tozero',
+      showgrid:true,gridcolor:'rgba(200,200,200,0.2)'},
+    hoverlabel:{bgcolor:'white',font_size:11,font_family:'DM Sans'}
+  };
+  if (!inited[elId]) {
+    Plotly.newPlot(el, data, layout, {displayModeBar:false, responsive:true});
+    inited[elId] = true;
+  } else { Plotly.react(el, data, layout); }
+}
+
+function renderDonut(item, elId) {
+  if (!item.valores.length) return;
+  var wh    = gsize(elId);
+  var el    = document.getElementById(elId);
+  var total = item.valores.reduce(function(s,v){ return s+v; }, 0);
+  var labels = item.labels.map(function(l,i) {
+    var pct = total>0 ? (item.valores[i]/total*100).toFixed(1) : '0.0';
     return l+': '+fmtDot(item.valores[i])+' ('+pct+'%)';
-  }});
-  var textF=item.valores.map(function(v){{return total>0?(v/total*100).toFixed(1)+'%':'';}});
-  var data=[{{type:'pie',labels:labels,values:item.valores,
-    marker:{{colors:item.cores,line:{{color:'white',width:3}}}},
-    hole:0.4,text:textF,textinfo:'text',
-    textfont:{{size:12,family:'Sora',weight:700}},insidetextorientation:'radial',
-    hovertemplate:'<b>%{{label}}</b><extra></extra>',
-    pull:item.valores.map(function(v){{return v===Math.max.apply(null,item.valores)?0.03:0;}}),
-    rotation:90,direction:'clockwise',sort:false}}];
-  var layout={{width:wh[0],height:wh[1],autosize:false,template:'plotly_white',
-    font:{{family:'DM Sans',size:9}},showlegend:true,
-    legend:{{orientation:'v',yanchor:'middle',y:0.5,xanchor:'left',x:1.02,font:{{size:8,family:'DM Sans',color:'#333'}}}},
-    margin:{{l:10,r:130,t:10,b:10}},hoverlabel:{{bgcolor:'white',font_size:11,font_family:'DM Sans'}}}};
-  if(!initialized[elId]){{Plotly.newPlot(el,data,layout,{{displayModeBar:false,responsive:false}});initialized[elId]=true;}}
-  else Plotly.react(el,data,layout);
-}}
-
-function renderLineSis(item, elId) {{
-  if(!item.valores.length) return;
-  var wh=gsize(elId), el=document.getElementById(elId);
-  var total=item.valores.reduce(function(s,v){{return s+v;}},0);
-  var xVals=item.labels.map(function(_,i){{return i;}});
-  var texts=item.valores.map(function(v) {{
-    var pct=total>0?(v/total*100).toFixed(1):'0.0';
-    return v>0?'<b>'+fmtDot(v)+'</b><br>'+pct+'%':'';
-  }});
-  var cor=item.cores[0]||'#0056A3';
-  var r=parseInt(cor.slice(1,3),16),g=parseInt(cor.slice(3,5),16),b=parseInt(cor.slice(5,7),16);
-  var fill='rgba('+r+','+g+','+b+',0.2)';
-  var data=[{{type:'scatter',mode:'lines+markers+text',x:xVals,y:item.valores,
-    text:texts,textposition:'top center',textfont:{{size:11,family:'DM Sans',color:'#1a1a1a'}},
-    line:{{width:4,color:cor,shape:'spline'}},marker:{{size:14,color:item.cores,symbol:'circle'}},
-    fill:'tozeroy',fillcolor:fill,
-    hovertemplate:'<b>%{{customdata}}</b><br>%{{y:,.0f}}<extra></extra>',
-    customdata:item.labels,showlegend:false,cliponaxis:false}}];
-  var layout={{width:wh[0],height:wh[1],autosize:false,
-    template:'plotly_white',showlegend:false,font:{{family:'DM Sans',size:9}},
-    margin:{{l:10,r:10,t:30,b:72}},plot_bgcolor:'rgba(248,249,250,0.5)',paper_bgcolor:'white',
-    xaxis:{{tickmode:'array',tickvals:xVals,ticktext:item.labels,
-      tickfont:{{size:8,family:'DM Sans',color:'#333'}},tickangle:-35,
-      showgrid:false,zeroline:false,showline:false,ticks:'',automargin:true}},
-    yaxis:{{showgrid:true,gridcolor:'rgba(200,200,200,0.35)',gridwidth:1,
+  });
+  var textF = item.valores.map(function(v){ return total>0?(v/total*100).toFixed(1)+'%':''; });
+  var data = [{
+    type:'pie', labels:labels, values:item.valores,
+    marker:{colors:item.cores, line:{color:'white',width:3}},
+    hole:0.4, text:textF, textinfo:'text',
+    textfont:{size:12,family:'Sora'}, insidetextorientation:'radial',
+    hovertemplate:'<b>%{label}</b><extra></extra>',
+    pull:item.valores.map(function(v){ return v===Math.max.apply(null,item.valores)?0.03:0; }),
+    rotation:90, direction:'clockwise', sort:false
+  }];
+  var layout = {
+    autosize:true,
+    template:'plotly_white', font:{family:'DM Sans',size:9}, showlegend:true,
+    legend:{orientation:'v',yanchor:'middle',y:0.5,xanchor:'left',x:1.02,font:{size:8,family:'DM Sans',color:'#333'}},
+    margin:{l:10,r:130,t:10,b:10},
+    hoverlabel:{bgcolor:'white',font_size:11,font_family:'DM Sans'}
+  };
+  if (!inited[elId]) {
+    Plotly.newPlot(el, data, layout, {displayModeBar:false, responsive:true});
+    inited[elId] = true;
+  } else { Plotly.react(el, data, layout); }
+}
+
+function renderLineSis(item, elId) {
+  if (!item.valores.length) return;
+  var wh    = gsize(elId);
+  var el    = document.getElementById(elId);
+  var total = item.valores.reduce(function(s,v){ return s+v; }, 0);
+  var xVals = item.labels.map(function(_,i){ return i; });
+  var texts = item.valores.map(function(v) {
+    var pct = total>0 ? (v/total*100).toFixed(1) : '0.0';
+    return v>0 ? '<b>'+fmtDot(v)+'</b><br>'+pct+'%' : '';
+  });
+  var cor  = item.cores[0] || '#0056A3';
+  var r_c  = parseInt(cor.slice(1,3),16);
+  var g_c  = parseInt(cor.slice(3,5),16);
+  var b_c  = parseInt(cor.slice(5,7),16);
+  var fill = 'rgba('+r_c+','+g_c+','+b_c+',0.2)';
+  var data = [{
+    type:'scatter', mode:'lines+markers+text',
+    x:xVals, y:item.valores,
+    text:texts, textposition:'top center',
+    textfont:{size:11,family:'DM Sans',color:'#1a1a1a'},
+    line:{width:4, color:cor, shape:'spline'},
+    marker:{size:14, color:item.cores, symbol:'circle'},
+    fill:'tozeroy', fillcolor:fill,
+    hovertemplate:'<b>%{customdata}</b><br>%{y:,.0f}<extra></extra>',
+    customdata:item.labels, showlegend:false, cliponaxis:false
+  }];
+  var layout = {
+    autosize:true,
+    template:'plotly_white', showlegend:false, font:{family:'DM Sans',size:9},
+    margin:{l:10,r:10,t:30,b:72},
+    plot_bgcolor:'rgba(248,249,250,0.5)', paper_bgcolor:'white',
+    xaxis:{tickmode:'array',tickvals:xVals,ticktext:item.labels,
+      tickfont:{size:8,family:'DM Sans',color:'#333'},tickangle:-35,
+      showgrid:false,zeroline:false,showline:false,ticks:'',automargin:true},
+    yaxis:{showgrid:true,gridcolor:'rgba(200,200,200,0.35)',gridwidth:1,
       zeroline:false,showline:false,showticklabels:false,ticks:'',
-      range:[0,Math.max.apply(null,item.valores)*1.6]}},
-    hoverlabel:{{bgcolor:'white',font_size:11,font_family:'DM Sans'}}}};
-  if(!initialized[elId]){{Plotly.newPlot(el,data,layout,{{displayModeBar:false,responsive:false}});initialized[elId]=true;}}
-  else Plotly.react(el,data,layout);
-}}
-
-function renderBarVSis(item, elId) {{
-  if(!item.valores.length) return;
-  var wh=gsize(elId), el=document.getElementById(elId);
-  var total=item.valores.reduce(function(s,v){{return s+v;}},0);
-  var maxVal=Math.max.apply(null,item.valores);
-  var annotations=item.labels.map(function(l,i) {{
-    var v=item.valores[i];
-    var pct=total>0?(v/total*100).toFixed(1):'0.0';
-    return {{x:l,y:v,xref:'x',yref:'y',showarrow:false,
-      yanchor:'bottom',xanchor:'center',yshift:4,
+      range:[0,Math.max.apply(null,item.valores)*1.6]},
+    hoverlabel:{bgcolor:'white',font_size:11,font_family:'DM Sans'}
+  };
+  if (!inited[elId]) {
+    Plotly.newPlot(el, data, layout, {displayModeBar:false, responsive:true});
+    inited[elId] = true;
+  } else { Plotly.react(el, data, layout); }
+}
+
+function renderBarVSis(item, elId) {
+  if (!item.valores.length) return;
+  var wh    = gsize(elId);
+  var el    = document.getElementById(elId);
+  var total  = item.valores.reduce(function(s,v){ return s+v; }, 0);
+  var maxVal = Math.max.apply(null, item.valores);
+  var annotations = item.labels.map(function(l,i) {
+    var v   = item.valores[i];
+    var pct = total>0 ? (v/total*100).toFixed(1) : '0.0';
+    return {x:l, y:v, xref:'x', yref:'y', showarrow:false,
+      yanchor:'bottom', xanchor:'center', yshift:4,
       text:'<b>'+fmtDot(v)+'</b><br><span style="font-size:10px">'+pct+'%</span>',
-      font:{{size:11,family:'DM Sans',color:'#1e3a5f'}}}};
-  }});
-  var data=[{{type:'bar',x:item.labels,y:item.valores,
-    text:item.valores.map(function(){{return '';}}),
-    marker:{{color:item.cores,line:{{color:'white',width:2}}}},
-    hovertemplate:'<b>%{{x}}</b><br>%{{y:,.0f}}<extra></extra>',
-    width:0.6,showlegend:false}}];
-  var layout={{width:wh[0],height:wh[1],autosize:false,
-    template:'plotly_white',showlegend:false,font:{{family:'DM Sans',size:11}},
-    margin:{{l:30,r:18,t:40,b:72}},plot_bgcolor:'rgba(248,249,250,0.6)',
-    paper_bgcolor:'white',bargap:0.3,annotations:annotations,
-    xaxis:{{tickfont:{{size:9,family:'DM Sans',color:'#374151'}},showgrid:false,tickangle:-30,automargin:true}},
-    yaxis:{{tickfont:{{size:9,family:'DM Sans'}},showgrid:true,
-      gridcolor:'rgba(200,200,200,0.35)',range:[0,maxVal*1.35],showticklabels:false,zeroline:false}},
-    hoverlabel:{{bgcolor:'white',font_size:12,font_family:'DM Sans'}}}};
-  if(!initialized[elId]){{Plotly.newPlot(el,data,layout,{{displayModeBar:false,responsive:false}});initialized[elId]=true;}}
-  else Plotly.react(el,data,layout);
-  roundBarsV(el);
-}}
-
-function renderFrame(f) {{
-  CARDS_CFG.forEach(function(c) {{
-    var cd=f.cards[c.col];
-    if(cd) document.getElementById('mv_'+c.col).textContent=cd.valor+cd.sufixo;
-  }});
-  f.linha1.forEach(function(item,i) {{
-    if(item.tipo==='barra_h')      renderBarH(item,'l1_'+i);
-    else if(item.tipo==='barra_v') renderBarV(item,'l1_'+i);
-    else if(item.tipo==='linha')   renderLine(item,'l1_'+i);
-  }});
-  f.linha2.forEach(function(item,i) {{
-    if(item.tipo==='donut')          renderDonut(item,'l2_'+i);
-    else if(item.tipo==='linha_sis') renderLineSis(item,'l2_'+i);
-    else if(item.tipo==='barv_sis')  renderBarVSis(item,'l2_'+i);
-  }});
-}}
-
-function stepFrame() {{
+      font:{size:11,family:'DM Sans',color:'#1e3a5f'}};
+  });
+  var data = [{
+    type:'bar', x:item.labels, y:item.valores,
+    text:item.valores.map(function(){ return ''; }),
+    marker:{color:item.cores, line:{color:'white',width:2}},
+    hovertemplate:'<b>%{x}</b><br>%{y:,.0f}<extra></extra>',
+    width:0.6, showlegend:false
+  }];
+  var layout = {
+    autosize:true,
+    template:'plotly_white', showlegend:false, font:{family:'DM Sans',size:11},
+    margin:{l:30,r:18,t:40,b:72},
+    plot_bgcolor:'rgba(248,249,250,0.6)', paper_bgcolor:'white',
+    bargap:0.3, annotations:annotations,
+    xaxis:{tickfont:{size:9,family:'DM Sans',color:'#374151'},showgrid:false,tickangle:-30,automargin:true},
+    yaxis:{tickfont:{size:9,family:'DM Sans'},showgrid:true,
+      gridcolor:'rgba(200,200,200,0.35)',range:[0,maxVal*1.35],showticklabels:false,zeroline:false},
+    hoverlabel:{bgcolor:'white',font_size:12,font_family:'DM Sans'}
+  };
+  if (!inited[elId]) {
+    Plotly.newPlot(el, data, layout, {displayModeBar:false, responsive:true});
+    inited[elId] = true;
+  } else { Plotly.react(el, data, layout); }
+}
+
+function roundBars(boxEl, r, orientation) {
+  setTimeout(function() {
+    boxEl.querySelectorAll('.bars path').forEach(function(p) {
+      var d = p.getAttribute('d');
+      if (!d) return;
+      var tok = d.match(/[A-Za-z][^A-Za-z]*/g) || [];
+      var cx=0, cy=0, aX=[], aY=[];
+      tok.forEach(function(t) {
+        var cmd = t[0];
+        var pts = t.slice(1).trim().split(/[\\s,]+/).map(Number).filter(function(n){ return !isNaN(n); });
+        if (cmd==='M'||cmd==='L') { aX.push(pts[0]); aY.push(pts[1]); cx=pts[0]; cy=pts[1]; }
+        else if (cmd==='H') { aX.push(pts[0]); aY.push(cy); cx=pts[0]; }
+        else if (cmd==='V') { aX.push(cx); aY.push(pts[0]); cy=pts[0]; }
+      });
+      if (aX.length < 2) return;
+      var x0=Math.min.apply(null,aX), x1=Math.max.apply(null,aX);
+      var y0=Math.min.apply(null,aY), y1=Math.max.apply(null,aY);
+      var w=x1-x0, h=y1-y0;
+      if (w<=0 || h<=0) return;
+      var rr = Math.min(r, w/2, h/2);
+      var nd;
+      if (orientation === 'h') {
+        nd = 'M '+x0+','+y0
+           + ' H '+(x1-rr)+' Q '+x1+','+y0+' '+x1+','+(y0+rr)
+           + ' V '+(y1-rr)+' Q '+x1+','+y1+' '+(x1-rr)+','+y1
+           + ' H '+x0+' V '+y0+' Z';
+      } else {
+        nd = 'M '+x0+','+y1
+           + ' H '+x1
+           + ' V '+(y0+rr)
+           + ' Q '+x1+','+y0+' '+(x1-rr)+','+y0
+           + ' H '+(x0+rr)+' Q '+x0+','+y0+' '+x0+','+(y0+rr)
+           + ' V '+y1+' Z';
+      }
+      p.setAttribute('d', nd);
+    });
+  }, 80);
+}
+
+function renderFrame(f) {
+  CARDS_CFG.forEach(function(c) {
+    var cd = f.cards[c.col];
+    if (cd) document.getElementById('mv_'+c.col).textContent = cd.valor+cd.sufixo;
+  });
+  f.linha1.forEach(function(item, i) {
+    if      (item.tipo==='barra_h') renderBarH(item, 'l1_'+i);
+    else if (item.tipo==='barra_v') renderBarV(item, 'l1_'+i);
+    else if (item.tipo==='linha')   renderLine(item, 'l1_'+i);
+  });
+  f.linha2.forEach(function(item, i) {
+    if      (item.tipo==='donut')     renderDonut(item,     'l2_'+i);
+    else if (item.tipo==='linha_sis') renderLineSis(item,   'l2_'+i);
+    else if (item.tipo==='barv_sis')  renderBarVSis(item,   'l2_'+i);
+  });
+}
+
+function stepFrame() {
   renderFrame(FRAMES[frameIdx]);
   frameIdx++;
-  if(frameIdx>=FRAMES.length) {{
+  if (frameIdx >= FRAMES.length) {
     clearTimeout(animTimer);
-    cdownTimer=setTimeout(function(){{frameIdx=0;startAnimation();}},PAUSE_MS);
-  }} else {{
-    animTimer=setTimeout(stepFrame,FRAME_MS);
-  }}
-}}
+    cdownTimer = setTimeout(function(){ frameIdx=0; startAnimation(); }, PAUSE_MS);
+  } else {
+    animTimer = setTimeout(stepFrame, FRAME_MS);
+  }
+}
 
-function startAnimation() {{
-  clearTimeout(animTimer); clearTimeout(cdownTimer);
-  animTimer=setTimeout(stepFrame,FRAME_MS);
-}}
+function startAnimation() {
+  clearTimeout(animTimer);
+  clearTimeout(cdownTimer);
+  animTimer = setTimeout(stepFrame, FRAME_MS);
+}
 
 var _rt;
-window.addEventListener('resize',function(){{
+window.addEventListener('resize', function() {
   clearTimeout(_rt);
-  _rt=setTimeout(function(){{
-    document.querySelectorAll('.cp').forEach(function(box){{
-      if(box.data) Plotly.relayout(box,{{width:box.clientWidth,height:box.clientHeight}});
-    }});
-  }},200);
-}});
-
-window.addEventListener('load',function(){{
+  _rt = setTimeout(function() {
+    document.querySelectorAll('.cp').forEach(function(box) {
+      if (box.data) Plotly.relayout(box, {width:box.clientWidth, height:box.clientHeight});
+    });
+  }, 200);
+});
+
+window.addEventListener('load', function() {
   buildDOM();
-  setTimeout(function(){{frameIdx=0;startAnimation();}},400);
-}});
+  setTimeout(function(){ frameIdx=0; startAnimation(); }, 400);
+});
 </script>
-</body></html>"""
+</body>
+</html>"""
+
+    html = (html
+        .replace('__FRAMES__',     frames_json)
+        .replace('__MESES__',      meses_json)
+        .replace('__TITULOS_L1__', json.dumps(TITULOS_L1))
+        .replace('__TITULOS_L2__', json.dumps(TITULOS_L2))
+        .replace('__SUBS_L1__',    json.dumps(subs_l1))
+        .replace('__SUBS_L2__',    json.dumps(subs_l2))
+    )
 
-    components.html(html, height=8000, scrolling=False)
+    components.html(html, height=8000, scrolling=True)
 
 else:
-    components.html("""<!DOCTYPE html><html><body style='display:flex;align-items:center;
-    justify-content:center;height:100dvh;font-family:sans-serif;color:#003a70;background:#f5f7fa;'>
-    <div style='text-align:center'><div style='font-size:2em'>📊</div>
+    components.html("""<!DOCTYPE html><html><body style="display:flex;align-items:center;
+    justify-content:center;height:100dvh;font-family:sans-serif;color:#003a70;background:#f5f7fa;">
+    <div style="text-align:center"><div style="font-size:2em">📊</div>
     <p>Aguardando dados... Recarregue a página.</p></div></body></html>""",
     height=4000, scrolling=False)
 

pages/full.py

@@ -8,6 +8,22 @@ from gs_client import read_ws
 
 st.set_page_config(layout="wide", initial_sidebar_state="collapsed", page_title="PMJA - Dashboard")
 
+st.markdown("""<style>
+#MainMenu,footer,header,[data-testid="stToolbar"],[data-testid="stDecoration"],
+[data-testid="stStatusWidget"]{display:none!important}
+.block-container,.element-container,.stMarkdown{padding:0!important;margin:0!important;max-width:100%!important}
+iframe{position:fixed!important;top:0!important;left:0!important;
+       width:100vw!important;height:100dvh!important;border:none!important;z-index:9999!important}
+[data-testid="stHorizontalBlock"]{gap:0!important;margin:0!important;padding:0!important;
+    height:0!important;overflow:visible!important}
+.main,[data-testid="stAppViewContainer"]{background:#f0faf6!important}
+@media(max-width:900px){
+  iframe{position:static!important;width:100%!important;height:7500px!important;z-index:1!important}
+  .main,[data-testid="stAppViewContainer"]{overflow-y:auto!important;height:auto!important}
+  .block-container{height:auto!important}
+}
+</style>""", unsafe_allow_html=True)
+
 # ── SESSION ───────────────────────────────────────────────────────────
 _cc = CookieController()
 COOKIE_NAME = "pmja_session"
@@ -38,33 +54,70 @@ if time.time() - st.session_state.inicio_exibicao >= 120:
     st.session_state.inicio_exibicao = time.time()
     st.switch_page("pages/atual.py")
 
-st.markdown("""<style>
-#MainMenu,footer,header,[data-testid="stToolbar"],[data-testid="stDecoration"],
-[data-testid="stStatusWidget"]{display:none!important}
-.block-container,.element-container,.stMarkdown{padding:0!important;margin:0!important;max-width:100%!important}
-iframe{position:fixed!important;top:0!important;left:0!important;
-       width:100vw!important;height:100dvh!important;border:none!important;z-index:9999!important}
-[data-testid="stHorizontalBlock"]{gap:0!important;margin:0!important;padding:0!important;
-    height:0!important;overflow:visible!important}
-.main,[data-testid="stAppViewContainer"]{background:#f0faf6!important}
-@media(max-width:900px){
-  iframe{position:static!important;width:100%!important;height:7500px!important;z-index:1!important}
-  .main,[data-testid="stAppViewContainer"]{overflow-y:auto!important;height:auto!important}
-  .block-container{height:auto!important}
-}
-</style>""", unsafe_allow_html=True)
+# ── LOADING ───────────────────────────────────────────────────────────
+loading_placeholder = st.empty()
+loading_placeholder.markdown("""
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700;800&family=Sora:wght@800&display=swap" rel="stylesheet">
+<style>
+#ld{position:fixed;inset:0;z-index:999999;
+  background:linear-gradient(135deg,#003a70 0%,#0056A3 50%,#064e3b 100%);
+  display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif}
+#ld .lg{display:flex;align-items:center;gap:24px;margin-bottom:36px}
+#ld img{height:34px;filter:brightness(0) invert(1);opacity:.9}
+#ld .dv{width:1px;height:32px;background:rgba(255,255,255,.25)}
+#ld h2{font-family:'Sora',sans-serif;font-size:clamp(15px,4vw,21px);color:#fff;font-weight:800;margin-bottom:4px;text-align:center}
+#ld p{font-size:clamp(11px,3vw,13px);color:rgba(255,255,255,.7);font-weight:600;margin-bottom:40px;text-align:center}
+#ld .sp{width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;
+  border-radius:50%;animation:sp .8s linear infinite;margin-bottom:24px}
+@keyframes sp{to{transform:rotate(360deg)}}
+#ld .bw{width:min(260px,70vw);height:4px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;margin-bottom:14px}
+#ld .bf{height:100%;width:0%;background:#fff;border-radius:99px;transition:width .4s ease}
+#ld .st{font-size:11px;color:rgba(255,255,255,.6);font-weight:600;text-align:center}
+#ld .dt span{animation:dt 1.2s infinite;opacity:0}
+#ld .dt span:nth-child(2){animation-delay:.2s}
+#ld .dt span:nth-child(3){animation-delay:.4s}
+@keyframes dt{0%,100%{opacity:0}50%{opacity:1}}
+</style>
+<div id="ld">
+  <div class="lg">
+    <img src="https://companieslogo.com/img/orig/AZ2.F-d26946db.png?t=1720244490">
+    <div class="dv"></div>
+    <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Logo-engie.svg">
+  </div>
+  <div class="sp"></div>
+  <h2>PMJA — Dashboard Gestão de Materiais</h2>
+  <p>Visão Completa · Recebimento &amp; Expedição</p>
+  <div class="bw"><div class="bf" id="ldbf"></div></div>
+  <div class="st" id="ldst">Conectando ao Google Sheets<span class="dt"><span>.</span><span>.</span><span>.</span></span></div>
+</div>
+<script>
+(function(){
+  var s=[{p:15,m:'Conectando ao Google Sheets'},{p:35,m:'Carregando dados de recebimento'},
+         {p:55,m:'Carregando dados de expedição'},{p:72,m:'Processando métricas'},
+         {p:88,m:'Montando gráficos'},{p:96,m:'Quase pronto'}];
+  var i=0;
+  function n(){
+    if(i>=s.length)return;
+    var x=s[i++];
+    var b=document.getElementById('ldbf'),t=document.getElementById('ldst');
+    if(b)b.style.width=x.p+'%';
+    if(t)t.innerHTML=x.m+'<span class="dt"><span>.</span><span>.</span><span>.</span></span>';
+    setTimeout(n,950+Math.random()*550);
+  }
+  setTimeout(n,300);
+})();
+</script>
+""", unsafe_allow_html=True)
+
+# ── LOAD DATA ─────────────────────────────────────────────────────────
+df_recebimento = read_ws("recebimento")
+df_rec_dados   = read_ws("rec_dados")
+df_exp_raw     = read_ws("exp_dados")
+loading_placeholder.empty()
 
 # ── HELPERS ───────────────────────────────────────────────────────────
 def fmt(n):
-    return "0" if pd.isna(n) else f"{int(n):,}".replace(',','.')
-
-def fix_df(df):
-    for col in df.columns:
-        if df[col].dtype == 'object':
-            num = pd.to_numeric(df[col], errors='coerce')
-            df[col] = num if num.notna().sum() == df[col].notna().sum() \
-                      else df[col].fillna('').astype(str).replace('nan','')
-    return df
+    return "0" if pd.isna(n) else "{:,}".format(int(n)).replace(',','.')
 
 def proc_exp(df_raw):
     if df_raw is None or df_raw.empty: return None, None
@@ -114,23 +167,16 @@ COR_SIS     = ['#001a33','#002d4d','#003d66','#004d80','#005d99','#006db3',
 COR_SIS_EXP = ['#064e3b','#065f46','#047857','#059669','#10b981','#34d399',
                '#4ade80','#6ee7b7','#86efac','#a7f3d0','#bbf7d0','#d1fae5','#ecfdf5','#f0fdf4']
 
-# ── BUILD ALL FRAMES ──────────────────────────────────────────────────
 def build_all_frames(df_rec, df_exp, df_rec_sis, df_exp_det, sistemas_rec,
                      anos_rec, anos_exp, mes_max, mes_max_rec, mes_max_exp, mes_max_sis):
     frames = []
-
     for mes in range(1, mes_max+1):
         frame = {"mes": mes, "metrics": {}, "charts": {}}
-
         for col, key, src in [
-            ('qtd_descarregamentos','desc','rec'),
-            ('peso_recebido','peso','rec'),
-            ('qtd_volumes_recebidos','vol','rec'),
-            ('qtd_unidades_recebidos','unid','rec'),
-            ('qtd_itens_por_unidade','itens','rec'),
-            ('qtd_requisicoes','req','exp'),
-            ('qtd_unidades_emitidas','uem','exp'),
-            ('qtd_itens_total','itot','exp'),
+            ('qtd_descarregamentos','desc','rec'),('peso_recebido','peso','rec'),
+            ('qtd_volumes_recebidos','vol','rec'),('qtd_unidades_recebidos','unid','rec'),
+            ('qtd_itens_por_unidade','itens','rec'),('qtd_requisicoes','req','exp'),
+            ('qtd_unidades_emitidas','uem','exp'),('qtd_itens_total','itot','exp'),
         ]:
             if src=='rec':
                 v = df_rec[df_rec['mes']<=mes][col].sum() if mes<=mes_max_rec else df_rec[col].sum()
@@ -139,17 +185,17 @@ def build_all_frames(df_rec, df_exp, df_rec_sis, df_exp_det, sistemas_rec,
             frame["metrics"][key] = fmt(v)
 
         def line_traces(df, col, anos, cores, lim):
-            traces, totais = [], {}
+            traces = []
             m = mes if mes<=lim else lim
             for i,ano in enumerate(anos):
                 d = df[(df['ano']==ano)&(df['mes']<=m)].sort_values('mes')
                 if d.empty: continue
-                totais[ano] = d[col].sum(); cor = cores[i%len(cores)]
+                cor = cores[i%len(cores)]
                 traces.append({
-                    "x": [int(x) for x in d['mes']],
-                    "y": [float(y) for y in d[col]],
-                    "text": [fmt(v) if v>0 else "" for v in d[col]],
-                    "line_color": cor, "ano": str(ano), "total": fmt(totais[ano])
+                    "x":[int(x) for x in d['mes']],
+                    "y":[float(y) for y in d[col]],
+                    "text":[fmt(v) if v>0 else "" for v in d[col]],
+                    "line_color":cor, "ano":str(ano), "total":fmt(d[col].sum())
                 })
             return traces
 
@@ -159,14 +205,16 @@ def build_all_frames(df_rec, df_exp, df_rec_sis, df_exp_det, sistemas_rec,
             frame["charts"]["r1_2"] = line_traces(df_rec,'qtd_volumes_recebidos',anos_rec,COR_REC,mes_max_rec)
 
         if df_rec_sis is not None and mes<=mes_max_sis and sistemas_rec:
-            cols_map = {col:s for col in df_rec_sis.columns
-                        for s in sistemas_rec
-                        if 'Volumes' in col and not any(e in col for e in ['Unid.','unidade']) and s in col}
+            cols_map = {}
+            for col in df_rec_sis.columns:
+                for s in sistemas_rec:
+                    if 'Volumes' in col and not any(e in col for e in ['Unid.','unidade']) and s in col:
+                        cols_map[col] = s
             slices = []
             for i,s in enumerate(sistemas_rec):
                 col = next((c for c,v in cols_map.items() if v==s), None)
                 if col and col in df_rec_sis.columns:
-                    t = float(pd.to_numeric(df_rec_sis.loc[df_rec_sis['mes']<=mes, col], errors='coerce').fillna(0).sum())
+                    t = float(pd.to_numeric(df_rec_sis.loc[df_rec_sis['mes']<=mes,col],errors='coerce').fillna(0).sum())
                     if t>0: slices.append({"label":s,"value":t,"color":COR_SIS[i%len(COR_SIS)]})
             if slices: frame["charts"]["r1_3"] = slices
 
@@ -175,18 +223,17 @@ def build_all_frames(df_rec, df_exp, df_rec_sis, df_exp_det, sistemas_rec,
             frame["charts"]["r2_2"] = line_traces(df_rec,'qtd_itens_por_unidade',anos_rec,COR_REC,mes_max_rec)
 
         if df_rec_sis is not None and mes<=mes_max_sis and sistemas_rec:
-            for slot, palavra, excluir in [
-                ('r2_1','Unid. Itens',['por unidade']),
-                ('r2_3','Itens por unidade',['Unid. Itens']),
-            ]:
-                cols_map2 = {col:s for col in df_rec_sis.columns
-                             for s in sistemas_rec
-                             if palavra in col and not any(e in col for e in excluir) and s in col}
+            for slot, palavra, excluir in [('r2_1','Unid. Itens',['por unidade']),('r2_3','Itens por unidade',['Unid. Itens'])]:
+                cols_map2 = {}
+                for col in df_rec_sis.columns:
+                    for s in sistemas_rec:
+                        if palavra in col and not any(e in col for e in excluir) and s in col:
+                            cols_map2[col] = s
                 bars = []
                 for i,s in enumerate(sistemas_rec):
                     col = next((c for c,v in cols_map2.items() if v==s), None)
                     if col and col in df_rec_sis.columns:
-                        t = float(pd.to_numeric(df_rec_sis.loc[df_rec_sis['mes']<=mes, col], errors='coerce').fillna(0).sum())
+                        t = float(pd.to_numeric(df_rec_sis.loc[df_rec_sis['mes']<=mes,col],errors='coerce').fillna(0).sum())
                         if t>0: bars.append({"label":s,"value":t,"color":COR_SIS[i%len(COR_SIS)]})
                 if bars: frame["charts"][slot] = bars
 
@@ -196,32 +243,25 @@ def build_all_frames(df_rec, df_exp, df_rec_sis, df_exp_det, sistemas_rec,
             frame["charts"]["e1_2"] = line_traces(df_exp,'qtd_itens_total',anos_exp,COR_EXP,mes_max_exp)
 
         if df_exp_det is not None and mes<=mes_max_exp:
-            det = df_exp_det[df_exp_det['mes_num']<=mes].copy()
-            req_c  = [c for c in df_exp_det.columns if 'requisi' in c.lower() and 'unid' not in c.lower() and 'por' not in c.lower()]
-            unid_c = [c for c in df_exp_det.columns if 'unid' in c.lower() and 'iten' in c.lower().replace('.','') and 'por' not in c.lower()]
-            itens_c= [c for c in df_exp_det.columns if 'iten' in c.lower().replace('.','') and 'por' in c.lower() and 'unid' in c.lower()]
-            for slot, cols in [('es_0',req_c),('es_1',unid_c),('es_2',itens_c)]:
+            det   = df_exp_det[df_exp_det['mes_num']<=mes].copy()
+            req_c = [c for c in df_exp_det.columns if 'requisi' in c.lower() and 'unid' not in c.lower() and 'por' not in c.lower()]
+            uni_c = [c for c in df_exp_det.columns if 'unid' in c.lower() and 'iten' in c.lower().replace('.','') and 'por' not in c.lower()]
+            it_c  = [c for c in df_exp_det.columns if 'iten' in c.lower().replace('.','') and 'por' in c.lower() and 'unid' in c.lower()]
+            for slot, cols in [('es_0',req_c),('es_1',uni_c),('es_2',it_c)]:
                 if not cols: continue
                 tots = {}
                 for col in cols:
                     cat = ext_cat(col)
                     if cat not in tots: tots[cat]={'v':0.0,'c':COR_SIS_EXP[len(tots)%len(COR_SIS_EXP)]}
-                    det.loc[:,col] = pd.to_numeric(det[col], errors='coerce').fillna(0)
+                    det.loc[:,col] = pd.to_numeric(det[col],errors='coerce').fillna(0)
                     tots[cat]['v'] += float(det[col].sum())
-                dados = sorted([(k,v) for k,v in tots.items() if v['v']>0], key=lambda x:x[1]['v'], reverse=True)
-                if dados:
-                    frame["charts"][slot] = [{"label":k,"value":v['v'],"color":v['c']} for k,v in dados]
+                dados = sorted([(k,v) for k,v in tots.items() if v['v']>0],key=lambda x:x[1]['v'],reverse=True)
+                if dados: frame["charts"][slot] = [{"label":k,"value":v['v'],"color":v['c']} for k,v in dados]
 
         frames.append(frame)
     return frames
 
-
-# ── LOAD DATA ─────────────────────────────────────────────────────────
-with st.spinner('📊 Carregando dados...'):
-    df_recebimento = read_ws("recebimento")   # ← gs_client (era: load_ws("recebimento"))
-    df_rec_dados   = read_ws("rec_dados")     # ← gs_client (era: load_ws("rec_dados"))
-    df_exp_raw     = read_ws("exp_dados")     # ← gs_client (era: load_ws("exp_dados"))
-
+# ── PROCESS DATA ──────────────────────────────────────────────────────
 df_exp_raw     = df_exp_raw     if df_exp_raw     is not None and not df_exp_raw.empty     else None
 df_recebimento = df_recebimento if df_recebimento is not None and not df_recebimento.empty else None
 df_rec_dados   = df_rec_dados   if df_rec_dados   is not None and not df_rec_dados.empty   else None
@@ -236,8 +276,7 @@ if df_recebimento is not None:
                           'peso_recebido','qtd_unidades_recebidos','qtd_itens_por_unidade']
     df_rec['data'] = pd.to_datetime(df_rec['mes_ano'], format='%m/%Y', errors='coerce')
     df_rec = df_rec.dropna(subset=['data']).sort_values('data')
-    df_rec['ano'] = df_rec['data'].dt.year
-    df_rec['mes'] = df_rec['data'].dt.month
+    df_rec['ano'] = df_rec['data'].dt.year; df_rec['mes'] = df_rec['data'].dt.month
     for col in ['qtd_descarregamentos','qtd_volumes_recebidos','peso_recebido',
                 'qtd_unidades_recebidos','qtd_itens_por_unidade']:
         if col in df_rec.columns:
@@ -262,85 +301,91 @@ if df_rec_dados is not None:
     sistemas_rec = get_sistemas(df_rec_sis)
     mes_max_sis  = int(df_rec_sis['mes'].max())
 
-# ── BUILD & RENDER ────────────────────────────────────────────────────
 if df_rec is not None and df_exp is not None and mes_max_rec>0 and mes_max_exp>0:
     anos_rec = [int(a) for a in sorted(df_rec['ano'].unique())]
     anos_exp = [int(a) for a in sorted(df_exp['ano'].unique())]
     mes_max  = max(mes_max_rec, mes_max_exp, mes_max_sis if mes_max_sis>0 else 0)
 
-    frames = build_all_frames(
-        df_rec, df_exp, df_rec_sis, df_exp_det, sistemas_rec,
-        anos_rec, anos_exp, mes_max, mes_max_rec, mes_max_exp, mes_max_sis
-    )
+    frames = build_all_frames(df_rec, df_exp, df_rec_sis, df_exp_det, sistemas_rec,
+        anos_rec, anos_exp, mes_max, mes_max_rec, mes_max_exp, mes_max_sis)
+
     frames_json = json.dumps(frames, ensure_ascii=False)
     meses_json  = json.dumps(MESES)
 
-    html = f"""<!DOCTYPE html><html><head>
+    html = """<!DOCTYPE html>
+<html>
+<head>
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Sora:wght@700;800;900&display=swap" rel="stylesheet">
 <script src="https://cdn.plot.ly/plotly-2.27.0.min.js" charset="utf-8"></script>
 <style>
-*{{margin:0;padding:0;box-sizing:border-box}}
-html,body{{width:100%;height:100%;overflow:hidden;
+* { margin:0; padding:0; box-sizing:border-box; }
+html, body { width:100%; height:100%; overflow:hidden;
   background:linear-gradient(160deg,#f0faf6 0%,#e6f7f1 55%,#d1fae5 100%);
-  font-family:'DM Sans',sans-serif;}}
-::-webkit-scrollbar{{width:4px}}
-::-webkit-scrollbar-thumb{{background:linear-gradient(#047857,#10b981);border-radius:10px}}
-.root{{
-  display:grid;width:100%;height:100dvh;gap:2px;padding:3px 4px 2px;overflow:hidden;
-  grid-template-rows:auto auto auto 1fr 1fr auto 1fr 1fr;
-}}
-.hdr{{background:linear-gradient(135deg,#003a70 0%,#0056A3 50%,#064e3b 100%);
-  border-radius:6px;padding:5px 14px;display:flex;align-items:center;justify-content:space-between;
-  box-shadow:0 3px 14px rgba(0,58,112,.18);position:relative;overflow:hidden;}}
-.hdr::before{{content:'';position:absolute;top:-50%;right:-3%;width:200px;height:200px;
-  border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.18) 0%,transparent 70%);pointer-events:none;}}
-.logo{{height:clamp(20px,3.2dvh,36px);filter:brightness(0) invert(1);opacity:.92}}
-.ht{{font-family:'Sora',sans-serif;font-size:clamp(12px,1.9dvh,20px);color:#fff;font-weight:800;letter-spacing:-.3px}}
-.hs{{font-family:'DM Sans',sans-serif;font-size:clamp(9px,1.2dvh,13px);color:rgba(255,255,255,.82);font-weight:600}}
-.mrow{{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;}}
-.mc{{background:#fff;border-radius:5px;padding:clamp(3px,.5dvh,7px) clamp(4px,.5vw,10px);
-  border-left:3px solid;box-shadow:0 1px 6px rgba(4,120,87,.07);overflow:hidden;}}
-.ml{{font-family:'DM Sans',sans-serif;font-size:clamp(6px,.85dvh,10px);
-  color:#6b7280;font-weight:700;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;}}
-.mv{{font-family:'Sora',sans-serif;font-size:clamp(11px,1.9dvh,22px);
-  font-weight:800;line-height:1.1;letter-spacing:-.4px;white-space:nowrap;transition:all .3s;}}
-.div{{border-radius:5px;padding:clamp(2px,.35dvh,5px) 10px;
-  display:flex;align-items:center;justify-content:center;}}
-.div-rec{{background:linear-gradient(135deg,#003a70 0%,#0075be 100%);box-shadow:0 2px 8px rgba(0,86,163,.15);}}
-.div-exp{{background:linear-gradient(135deg,#064e3b 0%,#10b981 100%);box-shadow:0 2px 8px rgba(6,78,59,.18);}}
-.div-lbl{{font-family:'Sora',sans-serif;font-size:clamp(9px,1.3dvh,15px);color:#fff;font-weight:800;letter-spacing:.5px}}
-.crow{{display:grid;gap:3px;min-height:0;}}
-.crow4{{grid-template-columns:repeat(4,1fr);}}
-.crow3{{grid-template-columns:repeat(3,1fr);}}
-.cb{{background:#fff;border-radius:6px;border:1px solid rgba(16,185,129,.12);
-  box-shadow:0 2px 8px rgba(4,120,87,.07);overflow:hidden;min-height:0;position:relative;}}
-#countdown-badge{{
-  position:fixed;bottom:10px;right:14px;z-index:99999;
-  background:rgba(6,78,59,0.82);color:#fff;
-  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;
-  padding:4px 10px;border-radius:20px;letter-spacing:.4px;
-  opacity:0;transition:opacity .4s;pointer-events:none;
-}}
-#countdown-badge.visible{{opacity:1;}}
-@media(max-width:900px){{
-  html,body{{overflow-y:auto!important;height:auto!important}}
-  .root{{height:auto!important;overflow:visible!important;grid-template-rows:auto!important}}
-  .mrow{{grid-template-columns:repeat(4,1fr)!important}}
-  .crow4{{grid-template-columns:repeat(2,1fr)!important;min-height:200px}}
-  .crow3{{grid-template-columns:repeat(2,1fr)!important;min-height:200px}}
-  .cb{{min-height:220px!important}}
-}}
-@media(max-width:600px){{
-  .mrow{{grid-template-columns:repeat(2,1fr)!important}}
-  .crow4,.crow3{{grid-template-columns:1fr!important}}
-  .cb{{min-height:200px!important}}
-  .hs{{display:none}}
-  .hdr{{padding:4px 8px!important}}
-  .div-lbl{{font-size:12px!important}}
-}}
+  font-family:'DM Sans',sans-serif; }
+::-webkit-scrollbar { width:4px; }
+::-webkit-scrollbar-thumb { background:linear-gradient(#047857,#10b981); border-radius:10px; }
+.root { display:grid; width:100%; height:100dvh; gap:2px; padding:3px 4px 2px; overflow:hidden;
+  grid-template-rows:auto auto auto 1fr 1fr auto 1fr 1fr; }
+.hdr { background:linear-gradient(135deg,#003a70 0%,#0056A3 50%,#064e3b 100%);
+  border-radius:6px; padding:5px 14px; display:flex; align-items:center;
+  justify-content:space-between; box-shadow:0 3px 14px rgba(0,58,112,.18);
+  position:relative; overflow:hidden; }
+.hdr::before { content:''; position:absolute; top:-50%; right:-3%; width:200px; height:200px;
+  border-radius:50%; background:radial-gradient(circle,rgba(16,185,129,.18) 0%,transparent 70%);
+  pointer-events:none; }
+.logo { height:clamp(20px,3.2dvh,36px); filter:brightness(0) invert(1); opacity:.92; }
+.ht { font-family:'Sora',sans-serif; font-size:clamp(12px,1.9dvh,20px);
+  color:#fff; font-weight:800; letter-spacing:-.3px; }
+.hs { font-family:'DM Sans',sans-serif; font-size:clamp(9px,1.2dvh,13px);
+  color:rgba(255,255,255,.82); font-weight:600; }
+.mrow { display:grid; grid-template-columns:repeat(8,1fr); gap:3px; }
+.mc { background:#fff; border-radius:5px;
+  padding:clamp(3px,.5dvh,7px) clamp(4px,.5vw,10px);
+  border-left:3px solid; box-shadow:0 1px 6px rgba(4,120,87,.07); overflow:hidden; }
+.ml { font-family:'DM Sans',sans-serif; font-size:clamp(6px,.85dvh,10px);
+  color:#6b7280; font-weight:700; text-transform:uppercase;
+  letter-spacing:.4px; white-space:nowrap; }
+.mv { font-family:'Sora',sans-serif; font-size:clamp(11px,1.9dvh,22px);
+  font-weight:800; line-height:1.1; letter-spacing:-.4px;
+  white-space:nowrap; transition:all .3s; }
+.div { border-radius:5px; padding:clamp(2px,.35dvh,5px) 10px;
+  display:flex; align-items:center; justify-content:center; }
+.div-rec { background:linear-gradient(135deg,#003a70 0%,#0075be 100%);
+  box-shadow:0 2px 8px rgba(0,86,163,.15); }
+.div-exp { background:linear-gradient(135deg,#064e3b 0%,#10b981 100%);
+  box-shadow:0 2px 8px rgba(6,78,59,.18); }
+.div-lbl { font-family:'Sora',sans-serif; font-size:clamp(9px,1.3dvh,15px);
+  color:#fff; font-weight:800; letter-spacing:.5px; }
+.crow { display:grid; gap:3px; min-height:0; }
+.crow4 { grid-template-columns:repeat(4,1fr); }
+.crow3 { grid-template-columns:repeat(3,1fr); }
+.cb { background:#fff; border-radius:6px; border:1px solid rgba(16,185,129,.12);
+  box-shadow:0 2px 8px rgba(4,120,87,.07); overflow:hidden; min-height:0; position:relative; }
+#countdown-badge { position:fixed; bottom:10px; right:14px; z-index:99999;
+  background:rgba(6,78,59,0.82); color:#fff; font-family:'DM Sans',sans-serif;
+  font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px;
+  letter-spacing:.4px; opacity:0; transition:opacity .4s; pointer-events:none; }
+#countdown-badge.visible { opacity:1; }
+@media(max-width:900px){
+  html,body { overflow-y:auto!important; height:auto!important; }
+  .root { height:auto!important; overflow:visible!important; grid-template-rows:auto!important; }
+  .mrow { grid-template-columns:repeat(4,1fr)!important; }
+  .crow4 { grid-template-columns:repeat(2,1fr)!important; min-height:200px; }
+  .crow3 { grid-template-columns:repeat(2,1fr)!important; min-height:200px; }
+  .cb { min-height:220px!important; }
+}
+@media(max-width:600px){
+  .mrow { grid-template-columns:repeat(2,1fr)!important; }
+  .crow4,.crow3 { grid-template-columns:1fr!important; }
+  .cb { min-height:200px!important; }
+  .hs { display:none; }
+  .hdr { padding:4px 8px!important; }
+  .div-lbl { font-size:12px!important; }
+}
 </style>
-</head><body>
+</head>
+<body>
 <div class="root">
   <div class="hdr">
     <img class="logo" src="https://companieslogo.com/img/orig/AZ2.F-d26946db.png?t=1720244490" alt="AZ">
@@ -350,7 +395,6 @@ html,body{{width:100%;height:100%;overflow:hidden;
     </div>
     <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Logo-engie.svg" alt="Engie">
   </div>
-
   <div class="mrow">
     <div class="mc" style="border-left-color:#003a70"><div class="ml">Descarregamentos</div><div class="mv" id="m_desc" style="color:#003a70">0</div></div>
     <div class="mc" style="border-left-color:#005a9c"><div class="ml">Peso Recebido</div><div class="mv" id="m_peso" style="color:#005a9c">0 kg</div></div>
@@ -361,7 +405,6 @@ html,body{{width:100%;height:100%;overflow:hidden;
     <div class="mc" style="border-left-color:#059669"><div class="ml">Unid. Emitidas</div><div class="mv" id="m_uem" style="color:#059669">0</div></div>
     <div class="mc" style="border-left-color:#10b981"><div class="ml">Total Itens</div><div class="mv" id="m_itot" style="color:#10b981">0</div></div>
   </div>
-
   <div class="div div-rec"><span class="div-lbl">📦 RECEBIMENTO</span></div>
   <div class="crow crow4">
     <div class="cb" id="r1_0"></div><div class="cb" id="r1_1"></div>
@@ -371,7 +414,6 @@ html,body{{width:100%;height:100%;overflow:hidden;
     <div class="cb" id="r2_0"></div><div class="cb" id="r2_1"></div>
     <div class="cb" id="r2_2"></div><div class="cb" id="r2_3"></div>
   </div>
-
   <div class="div div-exp"><span class="div-lbl">🚚 EXPEDIÇÃO</span></div>
   <div class="crow crow3">
     <div class="cb" id="e1_0"></div><div class="cb" id="e1_1"></div><div class="cb" id="e1_2"></div>
@@ -380,403 +422,411 @@ html,body{{width:100%;height:100%;overflow:hidden;
     <div class="cb" id="es_0"></div><div class="cb" id="es_1"></div><div class="cb" id="es_2"></div>
   </div>
 </div>
-
 <div id="countdown-badge">⏸ Reiniciando em <span id="cd-secs">60</span>s</div>
 
 <script>
-var FRAMES  = {frames_json};
-var MESES   = {meses_json};
-var REC_SLOTS    = ['r1_0','r1_1','r1_2','r1_3','r2_0','r2_1','r2_2','r2_3'];
-var LINE_SLOTS   = ['r1_0','r1_1','r1_2','r2_0','r2_2','e1_0','e1_1','e1_2'];
-var DONUT_SLOTS  = ['r1_3','es_0'];
-var BARH_SLOTS   = ['r2_1','es_1'];
-var BARV_SLOTS   = ['r2_3','es_2'];
-
-var METRIC_IDS = {{
-  'desc':'m_desc','peso':'m_peso','vol':'m_vol','unid':'m_unid','itens':'m_itens',
-  'req':'m_req','uem':'m_uem','itot':'m_itot'
-}};
-var METRIC_SUF = {{peso:' kg'}};
-var initialized = {{}};
-
-var FRAME_INTERVAL_MS  = 600;
-var PAUSE_AFTER_MS     = 60000;
-var frameIdx           = 0;
-var animTimer          = null;
-var countdownTimer     = null;
-var badge              = null;
-var cdSecs             = null;
-
-function gsize(id) {{
+var FRAMES = __FRAMES__;
+var MESES  = __MESES__;
+
+var REC_SLOTS   = ['r1_0','r1_1','r1_2','r1_3','r2_0','r2_1','r2_2','r2_3'];
+var LINE_SLOTS  = ['r1_0','r1_1','r1_2','r2_0','r2_2','e1_0','e1_1','e1_2'];
+var DONUT_SLOTS = ['r1_3','es_0'];
+var BARH_SLOTS  = ['r2_1','es_1'];
+var BARV_SLOTS  = ['r2_3','es_2'];
+var EXP_LINE    = ['e1_0','e1_1','e1_2'];
+
+var METRIC_IDS = {
+  desc:'m_desc', peso:'m_peso', vol:'m_vol', unid:'m_unid', itens:'m_itens',
+  req:'m_req',   uem:'m_uem',   itot:'m_itot'
+};
+var METRIC_SUF = { peso:' kg' };
+
+var TITLES = {
+  r1_0:'Descarregamentos', r1_1:'Peso Recebido (kg)', r1_2:'Volumes Recebidos',
+  r1_3:'Volumes por Sistema',
+  r2_0:'Unidades Recebidas', r2_1:'Unidades Itens por Sistema',
+  r2_2:'Itens por Unidade',  r2_3:'Itens/Unidade por Sistema',
+  e1_0:'Requisições',        e1_1:'Unidades Emitidas', e1_2:'Total de Itens',
+  es_0:'Requisições por Sistema', es_1:'Unidades Emitidas por Sistema', es_2:'Itens por Sistema'
+};
+
+var inited = {};
+var FRAME_INTERVAL_MS = 600;
+var PAUSE_AFTER_MS    = 60000;
+var frameIdx   = 0;
+var animTimer  = null;
+var cdTimer    = null;
+var badge      = null;
+var cdSecs     = null;
+
+function gsize(id) {
   var el = document.getElementById(id);
   if (!el) return [200,150];
-  return [el.clientWidth || 200, el.clientHeight || 150];
-}}
+  return [el.clientWidth||200, el.clientHeight||150];
+}
 
 var ticktext = Object.values(MESES);
 var tickvals = Object.keys(MESES).map(Number);
 
-function fmtNum(v) {{
+function fmtNum(v) {
   var n = parseFloat(v);
   if (isNaN(n)) return v+'';
-  if (Number.isInteger(n)) return n.toString().replace(/\\B(?=(\\d{{3}})+(?!\\d))/g,'.');
-  return n.toFixed(2).replace('.',',').replace(/\\B(?=(\\d{{3}})+(?!\\d))/g,'.');
-}}
-
-function makeLine(traces, id) {{
-  var wh = gsize(id);
-  var isRec = REC_SLOTS.indexOf(id) >= 0;
-  var gridCol = isRec ? 'rgba(0,86,163,0.10)' : 'rgba(16,185,129,0.10)';
-  var bgCol   = isRec ? 'rgba(240,246,255,0.4)' : 'rgba(240,250,246,0.4)';
+  var i = Math.round(n);
+  return i.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g,'.');
+}
+
+function addTitle(layout, id, isRec) {
+  var col = isRec ? '#003a70' : '#064e3b';
+  layout.title = {
+    text:'<b>'+(TITLES[id]||id)+'</b>',
+    font:{family:'Sora',size:11,color:col},
+    x:0.5, xanchor:'center'
+  };
+}
+
+// ── CORRECTED makeLine ────────────────────────────────────────────────
+// Uses per-series yshift annotations (like makeLineExp) to prevent
+// value labels from overlapping when multiple years share the same x points.
+function makeLine(traces, id) {
+  var wh     = gsize(id);
+  var isRec  = REC_SLOTS.indexOf(id) >= 0;
+  var grid   = isRec ? 'rgba(0,86,163,0.10)' : 'rgba(16,185,129,0.10)';
+  var bg     = isRec ? 'rgba(240,246,255,0.4)' : 'rgba(240,250,246,0.4)';
+
+  // Alternate label offsets per series so they don't stack on top of each other
+  var yShifts = [16, 30, 44, 58];
+
   var data = [], anns = [];
-  traces.forEach(function(t,i) {{
-    data.push({{
-      type:'scatter', mode:'lines+markers+text',
-      x: t.x, y: t.y,
-      text: t.text, textposition:'top center',
-      textfont:{{size:8,family:'DM Sans',color:'#333'}},
-      line:{{width:2.2,color:t.line_color,shape:'spline'}},
-      marker:{{size:6,color:t.line_color,line:{{width:1.5,color:'white'}}}},
+
+  traces.forEach(function(t, i) {
+    data.push({
+      type:'scatter', mode:'lines+markers',
+      x:t.x, y:t.y,
+      line:{width:2.2, color:t.line_color, shape:'spline'},
+      marker:{size:6, color:t.line_color, line:{width:1.5, color:'white'}},
       cliponaxis:false, showlegend:false, name:t.ano
-    }});
-    anns.push({{
-      x: i * 0.28, y: 1.13, xref:'paper', yref:'paper',
+    });
+
+    // Legend row for this series (stacked vertically, one per line)
+    anns.push({
+      x: i * 0.28, y: 1.13,
+      xref:'paper', yref:'paper',
       showarrow:false, xanchor:'left', yanchor:'top',
-      font:{{size:9,family:'DM Sans',color:t.line_color}},
-      text:'<b>■ '+t.ano+'</b>  '+t.total
-    }});
-  }});
-  return {{
+      font:{size:9, family:'DM Sans', color:t.line_color},
+      text:'<b>■ ' + t.ano + '</b>  ' + t.total
+    });
+
+    // Per-point value annotations with staggered yshift to avoid overlap
+    var sh = yShifts[i % yShifts.length];
+    t.x.forEach(function(mx, j) {
+      if (!t.text[j]) return;
+      anns.push({
+        x: mx, y: t.y[j],
+        xref:'x', yref:'y',
+        showarrow: false,
+        yshift: sh,
+        font:{size:8, family:'DM Sans', color: t.line_color},
+        bgcolor:'rgba(0,0,0,0)',
+        xanchor:'center', yanchor:'bottom',
+        text: '<b>' + t.text[j] + '</b>'
+      });
+    });
+  });
+
+  return {
     data: data,
-    layout: {{
+    layout: {
       width:wh[0], height:wh[1], autosize:false,
-      margin:{{l:38,r:12,t:52,b:24}},
-      paper_bgcolor:'white', plot_bgcolor:bgCol,
+      margin:{l:38, r:12, t:52, b:24},
+      paper_bgcolor:'white', plot_bgcolor:bg,
       showlegend:false, annotations:anns,
-      xaxis:{{tickmode:'array',tickvals:tickvals,ticktext:ticktext,
-              tickfont:{{size:8,family:'DM Sans'}},gridcolor:gridCol,zeroline:false}},
-      yaxis:{{tickfont:{{size:8,family:'DM Sans'}},rangemode:'tozero',
-              gridcolor:gridCol,zeroline:false}},
-    }}
-  }};
-}}
-
-function makePie(slices, id) {{
-  var wh = gsize(id);
-  var total = slices.reduce(function(s,x){{return s+x.value;}},0);
-  var labels = slices.map(function(x){{
-    return x.label+': '+(x.value+'').replace(/\\B(?=(\\d{{3}})+(?!\\d))/g,'.')
-      +' ('+(x.value/total*100).toFixed(1)+'%)';
-  }});
-  return {{
-    data:[{{type:'pie',labels:labels,values:slices.map(function(x){{return x.value;}}),hole:0.38,
-      marker:{{colors:slices.map(function(x){{return x.color;}}),line:{{color:'white',width:2}}}},
-      textfont:{{size:8,family:'DM Sans'}},textposition:'inside'}}],
-    layout:{{
-      width:wh[0],height:wh[1],autosize:false,
-      margin:{{l:6,r:90,t:36,b:8}},paper_bgcolor:'white',showlegend:true,
-      legend:{{orientation:'v',y:0.5,x:1.01,font:{{size:7,family:'DM Sans'}}}},
-    }}
-  }};
-}}
-
-function roundBarPaths(boxEl, r, orientation) {{
-  setTimeout(function() {{
-    boxEl.querySelectorAll('.bars path').forEach(function(p) {{
-      var d = p.getAttribute('d');
-      if (!d) return;
-      var tokens = d.match(/[A-Za-z][^A-Za-z]*/g) || [];
-      var cx=0, cy=0, allX=[], allY=[];
-      tokens.forEach(function(tok) {{
-        var cmd  = tok[0];
-        var pts  = tok.slice(1).trim().split(/[\\s,]+/).map(Number).filter(function(n){{return !isNaN(n);}});
-        if (cmd==='M'||cmd==='L') {{ allX.push(pts[0]); allY.push(pts[1]); cx=pts[0]; cy=pts[1]; }}
-        else if (cmd==='H')       {{ allX.push(pts[0]); allY.push(cy);     cx=pts[0]; }}
-        else if (cmd==='V')       {{ allX.push(cx);     allY.push(pts[0]); cy=pts[0]; }}
-      }});
-      if (allX.length < 2) return;
-      var x0=Math.min.apply(null,allX), x1=Math.max.apply(null,allX);
-      var y0=Math.min.apply(null,allY), y1=Math.max.apply(null,allY);
-      var w=x1-x0, h=y1-y0;
-      if (w<=0 || h<=0) return;
-      var rr = Math.min(r, w/2, h/2);
-      var nd;
-      if (orientation==='h') {{
-        nd = 'M '+x0+','+y0
-           + ' H '+(x1-rr)
-           + ' Q '+x1+','+y0+' '+x1+','+(y0+rr)
-           + ' V '+(y1-rr)
-           + ' Q '+x1+','+y1+' '+(x1-rr)+','+y1
-           + ' H '+x0
-           + ' V '+y0
-           + ' Z';
-      }} else {{
-        nd = 'M '+x0+','+y1
-           + ' H '+x1
-           + ' V '+(y0+rr)
-           + ' Q '+x1+','+y0+' '+(x1-rr)+','+y0
-           + ' H '+(x0+rr)
-           + ' Q '+x0+','+y0+' '+x0+','+(y0+rr)
-           + ' V '+y1
-           + ' Z';
-      }}
-      p.setAttribute('d', nd);
-    }});
-  }}, 60);
-}}
-
-function makeBarH(bars, id) {{
-  var wh = gsize(id);
-  var maxVal = Math.max.apply(null, bars.map(function(b){{return b.value;}}));
-  var isRec = REC_SLOTS.indexOf(id) >= 0;
-  var gridCol = isRec ? 'rgba(0,86,163,0.08)' : 'rgba(16,185,129,0.08)';
+      xaxis:{
+        tickmode:'array', tickvals:tickvals, ticktext:ticktext,
+        tickfont:{size:8, family:'DM Sans'},
+        gridcolor:grid, zeroline:false
+      },
+      yaxis:{
+        tickfont:{size:8, family:'DM Sans'},
+        rangemode:'tozero',
+        gridcolor:grid, zeroline:false
+      }
+    }
+  };
+}
+// ─────────────────────────────────────────────────────────────────────
+
+function makeLineExp(traces, id) {
+  var wh   = gsize(id);
+  var data = [], anns = [];
+  var shifts = [18,32,46,60];
+  traces.forEach(function(t, i) {
+    data.push({
+      type:'scatter', mode:'lines+markers',
+      x:t.x, y:t.y,
+      line:{width:2.2,color:t.line_color,shape:'spline'},
+      marker:{size:6,color:t.line_color,line:{width:1.5,color:'white'}},
+      cliponaxis:false, showlegend:false, name:t.ano
+    });
+    anns.push({
+      x:i*0.28, y:1.13, xref:'paper', yref:'paper',
+      showarrow:false, xanchor:'left', yanchor:'top',
+      font:{size:9,family:'DM Sans',color:t.line_color},
+      text:'<b>■ '+t.ano+'</b>  '+t.total
+    });
+    var sh = shifts[i % shifts.length];
+    t.x.forEach(function(mx,j) {
+      if (!t.text[j]) return;
+      anns.push({x:mx,y:t.y[j],xref:'x',yref:'y',showarrow:false,yshift:sh,
+        font:{size:8,family:'DM Sans',color:'#1a1a1a'},bgcolor:'rgba(0,0,0,0)',
+        xanchor:'center',yanchor:'bottom',text:t.text[j]});
+    });
+  });
+  return {
+    data:data,
+    layout:{
+      width:wh[0], height:wh[1], autosize:false,
+      margin:{l:38,r:12,t:52,b:36},
+      paper_bgcolor:'white', plot_bgcolor:'rgba(240,250,246,0.4)',
+      showlegend:false, annotations:anns,
+      xaxis:{tickmode:'array',tickvals:tickvals,ticktext:ticktext,
+        tickfont:{size:8,family:'DM Sans'},
+        gridcolor:'rgba(16,185,129,0.10)',zeroline:false,ticklabelstandoff:8},
+      yaxis:{tickfont:{size:8,family:'DM Sans'},rangemode:'tozero',
+        gridcolor:'rgba(16,185,129,0.10)',zeroline:false}
+    }
+  };
+}
+
+function makePie(slices, id) {
+  var wh    = gsize(id);
+  var total = slices.reduce(function(s,x){ return s+x.value; }, 0);
+  var labels = slices.map(function(x) {
+    return x.label+': '+fmtNum(x.value)+' ('+(x.value/total*100).toFixed(1)+'%)';
+  });
+  return {
+    data:[{
+      type:'pie', labels:labels, values:slices.map(function(x){ return x.value; }),
+      hole:0.38,
+      marker:{colors:slices.map(function(x){ return x.color; }), line:{color:'white',width:2}},
+      textfont:{size:8,family:'DM Sans'}, textposition:'inside'
+    }],
+    layout:{
+      width:wh[0], height:wh[1], autosize:false,
+      margin:{l:6,r:90,t:36,b:8}, paper_bgcolor:'white',
+      showlegend:true,
+      legend:{orientation:'v',y:0.5,x:1.01,font:{size:7,family:'DM Sans'}}
+    }
+  };
+}
+
+function makeBarH(bars, id) {
+  var wh     = gsize(id);
+  var isRec  = REC_SLOTS.indexOf(id) >= 0;
+  var grid   = isRec ? 'rgba(0,86,163,0.08)' : 'rgba(16,185,129,0.08)';
+  var maxVal = Math.max.apply(null, bars.map(function(b){ return b.value; }));
   var thresh = maxVal * 0.15;
-  var anns = bars.map(function(b) {{
-    var inside = b.value >= thresh;
-    return {{
-      x: inside ? b.value * 0.96 : b.value + maxVal * 0.02,
+  var anns   = bars.map(function(b) {
+    var ins = b.value >= thresh;
+    return {
+      x: ins ? b.value*0.96 : b.value+maxVal*0.02,
       y: b.label,
       xref:'x', yref:'y', showarrow:false,
-      xanchor: inside ? 'right' : 'left',
-      yanchor:'middle',
+      xanchor: ins?'right':'left', yanchor:'middle',
       text:'<b>'+fmtNum(b.value)+'</b>',
-      font:{{size:9,family:'DM Sans',color: inside?'white':'#374151'}}
-    }};
-  }});
-  return {{
-    data:[{{
+      font:{size:9,family:'DM Sans',color:ins?'white':'#374151'}
+    };
+  });
+  return {
+    data:[{
       type:'bar', orientation:'h',
-      x: bars.map(function(b){{return b.value;}}),
-      y: bars.map(function(b){{return b.label;}}),
-      text: bars.map(function(){{return '';}}),
-      marker:{{
-        color: bars.map(function(b){{return b.color;}}),
-        opacity: 0.90,
-        line:{{color:'rgba(255,255,255,0)',width:0}}
-      }}
-    }}],
-    layout:{{
+      x:bars.map(function(b){ return b.value; }),
+      y:bars.map(function(b){ return b.label; }),
+      text:bars.map(function(){ return ''; }),
+      marker:{color:bars.map(function(b){ return b.color; }),opacity:0.90,line:{color:'rgba(255,255,255,0)',width:0}}
+    }],
+    layout:{
       width:wh[0], height:wh[1], autosize:false,
-      margin:{{l:96,r:60,t:36,b:12}},
+      margin:{l:96,r:60,t:36,b:12},
       paper_bgcolor:'white', plot_bgcolor:'rgba(248,252,250,0.6)',
-      showlegend:false, bargap: 0.28, annotations: anns,
-      yaxis:{{tickfont:{{size:8,family:'DM Sans',color:'#4b5563'}},automargin:true,gridcolor:'rgba(0,0,0,0)',zeroline:false}},
-      xaxis:{{tickfont:{{size:8,family:'DM Sans',color:'#9ca3af'}},gridcolor:gridCol,zeroline:false,range:[0, maxVal * 1.25]}},
-      shapes:[{{type:'rect',xref:'paper',yref:'paper',x0:0,y0:0,x1:1,y1:1,
-        line:{{color:'rgba(16,185,129,0.12)',width:1}},fillcolor:'rgba(0,0,0,0)'}}]
-    }},
-    _orientation: 'h'
-  }};
-}}
-
-function makeBarV(bars, id) {{
-  var wh = gsize(id);
-  var maxVal = Math.max.apply(null, bars.map(function(b){{return b.value;}}));
-  var isRec = REC_SLOTS.indexOf(id) >= 0;
-  var gridCol = isRec ? 'rgba(0,86,163,0.08)' : 'rgba(16,185,129,0.08)';
-  var anns = bars.map(function(b) {{
-    return {{
-      x: b.label, y: b.value,
-      xref:'x', yref:'y', showarrow:false,
-      xanchor:'center', yanchor:'bottom', yshift:4,
+      showlegend:false, bargap:0.28, annotations:anns,
+      yaxis:{tickfont:{size:8,family:'DM Sans',color:'#4b5563'},automargin:true,
+        gridcolor:'rgba(0,0,0,0)',zeroline:false},
+      xaxis:{tickfont:{size:8,family:'DM Sans',color:'#9ca3af'},
+        gridcolor:grid,zeroline:false,range:[0,maxVal*1.25]}
+    },
+    _orient:'h'
+  };
+}
+
+function makeBarV(bars, id) {
+  var wh     = gsize(id);
+  var isRec  = REC_SLOTS.indexOf(id) >= 0;
+  var grid   = isRec ? 'rgba(0,86,163,0.08)' : 'rgba(16,185,129,0.08)';
+  var maxVal = Math.max.apply(null, bars.map(function(b){ return b.value; }));
+  var anns   = bars.map(function(b) {
+    return {x:b.label,y:b.value,xref:'x',yref:'y',showarrow:false,
+      xanchor:'center',yanchor:'bottom',yshift:4,
       text:'<b>'+fmtNum(b.value)+'</b>',
-      font:{{size:9,family:'DM Sans',color:'#374151'}}
-    }};
-  }});
-  return {{
-    data:[{{
+      font:{size:9,family:'DM Sans',color:'#374151'}};
+  });
+  return {
+    data:[{
       type:'bar',
-      x: bars.map(function(b){{return b.label;}}),
-      y: bars.map(function(b){{return b.value;}}),
-      text: bars.map(function(){{return '';}}),
-      marker:{{
-        color: bars.map(function(b){{return b.color;}}),
-        opacity: 0.90,
-        line:{{color:'rgba(255,255,255,0)',width:0}}
-      }}
-    }}],
-    layout:{{
+      x:bars.map(function(b){ return b.label; }),
+      y:bars.map(function(b){ return b.value; }),
+      text:bars.map(function(){ return ''; }),
+      marker:{color:bars.map(function(b){ return b.color; }),opacity:0.90,line:{color:'rgba(255,255,255,0)',width:0}}
+    }],
+    layout:{
       width:wh[0], height:wh[1], autosize:false,
-      margin:{{l:38,r:12,t:42,b:100}},
+      margin:{l:38,r:12,t:42,b:100},
       paper_bgcolor:'white', plot_bgcolor:'rgba(248,252,250,0.6)',
-      showlegend:false, bargap: 0.30, annotations: anns,
-      xaxis:{{tickfont:{{size:7,family:'DM Sans',color:'#4b5563'}},tickangle:-45,zeroline:false,automargin:true,ticklabelstandoff:8}},
-      yaxis:{{tickfont:{{size:8,family:'DM Sans',color:'#9ca3af'}},gridcolor:gridCol,zeroline:false,range:[0, maxVal * 1.30]}},
-      shapes:[{{type:'rect',xref:'paper',yref:'paper',x0:0,y0:0,x1:1,y1:1,
-        line:{{color:'rgba(16,185,129,0.12)',width:1}},fillcolor:'rgba(0,0,0,0)'}}]
-    }},
-    _orientation: 'v'
-  }};
-}}
-
-function addTitle(layout, title, isRec) {{
-  var titleColor = isRec ? '#003a70' : '#064e3b';
-  layout.title = {{
-    text: '<b>'+title+'</b>',
-    font:{{family:'Sora',size:11,color:titleColor}},
-    x:0.5, xanchor:'center'
-  }};
-  return layout;
-}}
+      showlegend:false, bargap:0.30, annotations:anns,
+      xaxis:{tickfont:{size:7,family:'DM Sans',color:'#4b5563'},
+        tickangle:-45,zeroline:false,automargin:true,ticklabelstandoff:8},
+      yaxis:{tickfont:{size:8,family:'DM Sans',color:'#9ca3af'},
+        gridcolor:grid,zeroline:false,range:[0,maxVal*1.30]}
+    },
+    _orient:'v'
+  };
+}
 
-var TITLES = {{
-  r1_0:'Descarregamentos', r1_1:'Peso Recebido (kg)', r1_2:'Volumes Recebidos',
-  r1_3:'Volumes por Sistema',
-  r2_0:'Unidades Recebidas', r2_1:'Unidades Itens por Sistema',
-  r2_2:'Itens por Unidade',  r2_3:'Itens/Unidade por Sistema',
-  e1_0:'Requisições', e1_1:'Unidades Emitidas', e1_2:'Total de Itens',
-  es_0:'Requisições por Sistema', es_1:'Unidades Emitidas por Sistema', es_2:'Itens por Sistema'
-}};
+function roundBars(boxEl, r, orient) {
+  setTimeout(function() {
+    boxEl.querySelectorAll('.bars path').forEach(function(p) {
+      var d = p.getAttribute('d');
+      if (!d) return;
+      var tok = d.match(/[A-Za-z][^A-Za-z]*/g)||[];
+      var cx=0,cy=0,aX=[],aY=[];
+      tok.forEach(function(t) {
+        var cmd = t[0];
+        var pts = t.slice(1).trim().split(/[\\s,]+/).map(Number).filter(function(n){ return !isNaN(n); });
+        if (cmd==='M'||cmd==='L') { aX.push(pts[0]); aY.push(pts[1]); cx=pts[0]; cy=pts[1]; }
+        else if (cmd==='H') { aX.push(pts[0]); aY.push(cy); cx=pts[0]; }
+        else if (cmd==='V') { aX.push(cx); aY.push(pts[0]); cy=pts[0]; }
+      });
+      if (aX.length<2) return;
+      var x0=Math.min.apply(null,aX), x1=Math.max.apply(null,aX);
+      var y0=Math.min.apply(null,aY), y1=Math.max.apply(null,aY);
+      var w=x1-x0, h=y1-y0;
+      if (w<=0||h<=0) return;
+      var rr=Math.min(r,w/2,h/2), nd;
+      if (orient==='h') {
+        nd='M '+x0+','+y0+' H '+(x1-rr)+' Q '+x1+','+y0+' '+x1+','+(y0+rr)
+          +' V '+(y1-rr)+' Q '+x1+','+y1+' '+(x1-rr)+','+y1+' H '+x0+' V '+y0+' Z';
+      } else {
+        nd='M '+x0+','+y1+' H '+x1+' V '+(y0+rr)
+          +' Q '+x1+','+y0+' '+(x1-rr)+','+y0
+          +' H '+(x0+rr)+' Q '+x0+','+y0+' '+x0+','+(y0+rr)+' V '+y1+' Z';
+      }
+      p.setAttribute('d', nd);
+    });
+  }, 60);
+}
 
-function makeLine_exp(traces, id) {{
-  var wh = gsize(id);
-  var data = [], anns = [];
-  var yshifts = [18, 32, 46, 60];
-  traces.forEach(function(t,i) {{
-    data.push({{
-      type:'scatter', mode:'lines+markers',
-      x: t.x, y: t.y,
-      line:{{width:2.2,color:t.line_color,shape:'spline'}},
-      marker:{{size:6,color:t.line_color,line:{{width:1.5,color:'white'}}}},
-      cliponaxis:false, showlegend:false, name:t.ano
-    }});
-    anns.push({{
-      x: i * 0.28, y: 1.13, xref:'paper', yref:'paper',
-      showarrow:false, xanchor:'left', yanchor:'top',
-      font:{{size:9,family:'DM Sans',color:t.line_color}},
-      text:'<b>■ '+t.ano+'</b>  '+t.total
-    }});
-    var shift = yshifts[i % yshifts.length];
-    t.x.forEach(function(mx, j) {{
-      if (!t.text[j]) return;
-      anns.push({{
-        x:mx, y:t.y[j], xref:'x', yref:'y',
-        showarrow:false, yshift:shift,
-        font:{{size:8,family:'DM Sans',color:'#1a1a1a'}},
-        bgcolor:'rgba(0,0,0,0)',
-        xanchor:'center', yanchor:'bottom',
-        text:t.text[j]
-      }});
-    }});
-  }});
-  return {{
-    data: data,
-    layout: {{
-      width:wh[0], height:wh[1], autosize:false,
-      margin:{{l:38,r:12,t:52,b:36}},
-      paper_bgcolor:'white', plot_bgcolor:'rgba(240,250,246,0.4)',
-      showlegend:false, annotations:anns,
-      xaxis:{{tickmode:'array',tickvals:tickvals,ticktext:ticktext,
-              tickfont:{{size:8,family:'DM Sans'}},
-              gridcolor:'rgba(16,185,129,0.10)',zeroline:false,
-              ticklabelstandoff:8}},
-      yaxis:{{tickfont:{{size:8,family:'DM Sans'}},rangemode:'tozero',
-              gridcolor:'rgba(16,185,129,0.10)',zeroline:false}},
-    }}
-  }};
-}}
-
-function renderFrame(f) {{
-  Object.keys(METRIC_IDS).forEach(function(k) {{
+function renderFrame(f) {
+  Object.keys(METRIC_IDS).forEach(function(k) {
     var el = document.getElementById(METRIC_IDS[k]);
-    if (el && f.metrics[k] !== undefined) {{
-      el.textContent = f.metrics[k] + (METRIC_SUF[k]||'');
-    }}
-  }});
+    if (el && f.metrics[k] !== undefined) el.textContent = f.metrics[k]+(METRIC_SUF[k]||'');
+  });
 
-  var slots = Object.keys(f.charts);
-  slots.forEach(function(id) {{
+  Object.keys(f.charts).forEach(function(id) {
     var box = document.getElementById(id);
     if (!box) return;
-    var d = f.charts[id];
-    var spec;
+    var d    = f.charts[id];
     var isRec = REC_SLOTS.indexOf(id) >= 0;
-    var expLineSlots = ['e1_0','e1_1','e1_2'];
-
-    if (LINE_SLOTS.indexOf(id) >= 0) {{
-      spec = expLineSlots.indexOf(id) >= 0 ? makeLine_exp(d, id) : makeLine(d, id);
-    }}
-    else if (DONUT_SLOTS.indexOf(id) >= 0) spec = makePie(d, id);
-    else if (BARH_SLOTS.indexOf(id) >= 0)  spec = makeBarH(d, id);
-    else if (BARV_SLOTS.indexOf(id) >= 0)  spec = makeBarV(d, id);
+    var spec;
+
+    if (LINE_SLOTS.indexOf(id) >= 0) {
+      spec = EXP_LINE.indexOf(id) >= 0 ? makeLineExp(d,id) : makeLine(d,id);
+    } else if (DONUT_SLOTS.indexOf(id) >= 0) {
+      spec = makePie(d, id);
+    } else if (BARH_SLOTS.indexOf(id) >= 0) {
+      spec = makeBarH(d, id);
+    } else if (BARV_SLOTS.indexOf(id) >= 0) {
+      spec = makeBarV(d, id);
+    }
     if (!spec) return;
 
-    addTitle(spec.layout, TITLES[id]||id, isRec);
+    addTitle(spec.layout, id, isRec);
     var isBar = (BARH_SLOTS.indexOf(id)>=0 || BARV_SLOTS.indexOf(id)>=0);
-    var orient = spec._orientation || 'v';
+    var orient = spec._orient || 'v';
 
-    if (!initialized[id]) {{
-      Plotly.newPlot(box, spec.data, spec.layout, {{displayModeBar:false, responsive:false}});
-      initialized[id] = true;
-    }} else {{
+    if (!inited[id]) {
+      Plotly.newPlot(box, spec.data, spec.layout, {displayModeBar:false, responsive:false});
+      inited[id] = true;
+    } else {
       Plotly.react(box, spec.data, spec.layout);
-    }}
-    if (isBar) roundBarPaths(box, 7, orient);
-  }});
-}}
+    }
+    if (isBar) roundBars(box, 7, orient);
+  });
+}
 
-function showCountdown(seconds) {{
+function showCountdown(secs) {
   badge.classList.add('visible');
-  var remaining = seconds;
-  cdSecs.textContent = remaining;
-  countdownTimer = setInterval(function() {{
-    remaining -= 1;
-    cdSecs.textContent = remaining;
-    if (remaining <= 0) {{
-      clearInterval(countdownTimer);
+  var rem = secs;
+  cdSecs.textContent = rem;
+  cdTimer = setInterval(function() {
+    rem--;
+    cdSecs.textContent = rem;
+    if (rem <= 0) {
+      clearInterval(cdTimer);
       badge.classList.remove('visible');
       frameIdx = 0;
       startAnimation();
-    }}
-  }}, 1000);
-}}
+    }
+  }, 1000);
+}
 
-function stepFrame() {{
+function stepFrame() {
   renderFrame(FRAMES[frameIdx]);
   frameIdx++;
-  if (frameIdx >= FRAMES.length) {{
+  if (frameIdx >= FRAMES.length) {
     clearTimeout(animTimer);
     showCountdown(PAUSE_AFTER_MS / 1000);
-  }} else {{
+  } else {
     animTimer = setTimeout(stepFrame, FRAME_INTERVAL_MS);
-  }}
-}}
+  }
+}
 
-function startAnimation() {{
+function startAnimation() {
   clearTimeout(animTimer);
-  clearInterval(countdownTimer);
+  clearInterval(cdTimer);
   animTimer = setTimeout(stepFrame, FRAME_INTERVAL_MS);
-}}
+}
 
-window.addEventListener('load', function() {{
-  badge   = document.getElementById('countdown-badge');
-  cdSecs  = document.getElementById('cd-secs');
-  setTimeout(function() {{
-    frameIdx = 0;
-    startAnimation();
-  }}, 300);
-}});
+window.addEventListener('load', function() {
+  badge  = document.getElementById('countdown-badge');
+  cdSecs = document.getElementById('cd-secs');
+  setTimeout(function(){ frameIdx=0; startAnimation(); }, 300);
+});
 
 var _rt;
-window.addEventListener('resize', function() {{
+window.addEventListener('resize', function() {
   clearTimeout(_rt);
-  _rt = setTimeout(function() {{
-    document.querySelectorAll('.cb').forEach(function(box) {{
-      if (box.data) {{
-        Plotly.relayout(box, {{width: box.clientWidth, height: box.clientHeight}});
-      }}
-    }});
-  }}, 200);
-}});
+  _rt = setTimeout(function() {
+    document.querySelectorAll('.cb').forEach(function(box) {
+      if (box.data) Plotly.relayout(box, {width:box.clientWidth, height:box.clientHeight});
+    });
+  }, 200);
+});
 </script>
-</body></html>"""
+</body>
+</html>"""
+
+    html = (html
+        .replace('__FRAMES__', frames_json)
+        .replace('__MESES__',  meses_json)
+    )
 
     components.html(html, height=8000, scrolling=False)
 
 else:
-    components.html("""<!DOCTYPE html><html><body style='display:flex;align-items:center;justify-content:center;height:100dvh;font-family:sans-serif;color:#064e3b;background:#f0faf6;'>
-    <div style='text-align:center'><div style='font-size:2em'>📊</div><p>Aguardando dados... Recarregue a página.</p></div>
-    </body></html>""", height=4000, scrolling=False)
+    components.html("""<!DOCTYPE html><html><body style="display:flex;align-items:center;
+    justify-content:center;height:100dvh;font-family:sans-serif;color:#064e3b;background:#f0faf6;">
+    <div style="text-align:center"><div style="font-size:2em">📊</div>
+    <p>Aguardando dados... Recarregue a página.</p></div></body></html>""",
+    height=4000, scrolling=False)
 
 time.sleep(60)
-st.rerun()
+st.rerun()

pages/rec.py

@@ -7,7 +7,23 @@ import streamlit.components.v1 as components
 from gs_client import read_ws
 
 st.set_page_config(layout="wide", initial_sidebar_state="collapsed", page_title="PMJA - Dashboard Recebimento")
-#carregando
+
+st.markdown("""<style>
+#MainMenu,footer,header,[data-testid="stToolbar"],[data-testid="stDecoration"],
+[data-testid="stStatusWidget"]{display:none!important}
+.block-container,.element-container,.stMarkdown{padding:0!important;margin:0!important;max-width:100%!important}
+iframe{position:fixed!important;top:0!important;left:0!important;
+       width:100vw!important;height:100dvh!important;border:none!important;z-index:9999!important}
+[data-testid="stHorizontalBlock"]{gap:0!important;margin:0!important;padding:0!important;
+    height:0!important;overflow:visible!important}
+.main,[data-testid="stAppViewContainer"]{background:#f5f7fa!important}
+@media(max-width:900px){
+  iframe{position:static!important;width:100%!important;height:7500px!important;z-index:1!important}
+  .main,[data-testid="stAppViewContainer"]{overflow-y:auto!important;height:auto!important}
+  .block-container{height:auto!important}
+}
+</style>""", unsafe_allow_html=True)
+
 # ── SESSION ───────────────────────────────────────────────────────────
 _cc = CookieController()
 COOKIE_NAME = "pmja_session"
@@ -38,21 +54,63 @@ if time.time() - st.session_state.inicio_exibicao >= 120:
     st.session_state.inicio_exibicao = time.time()
     st.switch_page("pages/exp.py")
 
-st.markdown("""<style>
-#MainMenu,footer,header,[data-testid="stToolbar"],[data-testid="stDecoration"],
-[data-testid="stStatusWidget"]{display:none!important}
-.block-container,.element-container,.stMarkdown{padding:0!important;margin:0!important;max-width:100%!important}
-iframe{position:fixed!important;top:0!important;left:0!important;
-       width:100vw!important;height:100dvh!important;border:none!important;z-index:9999!important}
-[data-testid="stHorizontalBlock"]{gap:0!important;margin:0!important;padding:0!important;
-    height:0!important;overflow:visible!important}
-.main,[data-testid="stAppViewContainer"]{background:#f5f7fa!important}
-@media(max-width:900px){
-  iframe{position:static!important;width:100%!important;height:7500px!important;z-index:1!important}
-  .main,[data-testid="stAppViewContainer"]{overflow-y:auto!important;height:auto!important}
-  .block-container{height:auto!important}
-}
-</style>""", unsafe_allow_html=True)
+# ── LOADING ───────────────────────────────────────────────────────────
+loading_placeholder = st.empty()
+loading_placeholder.markdown("""
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700;800&family=Sora:wght@800&display=swap" rel="stylesheet">
+<style>
+#ld{position:fixed;inset:0;z-index:999999;background:linear-gradient(135deg,#003a70,#0056A3);
+  display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif}
+#ld .lg{display:flex;align-items:center;gap:24px;margin-bottom:36px}
+#ld img{height:34px;filter:brightness(0) invert(1);opacity:.9}
+#ld .dv{width:1px;height:32px;background:rgba(255,255,255,.25)}
+#ld h2{font-family:'Sora',sans-serif;font-size:clamp(15px,4vw,21px);color:#fff;font-weight:800;margin-bottom:4px;text-align:center}
+#ld p{font-size:clamp(11px,3vw,13px);color:rgba(255,255,255,.7);font-weight:600;margin-bottom:40px;text-align:center}
+#ld .sp{width:32px;height:32px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;
+  border-radius:50%;animation:sp .8s linear infinite;margin-bottom:24px}
+@keyframes sp{to{transform:rotate(360deg)}}
+#ld .bw{width:min(260px,70vw);height:4px;background:rgba(255,255,255,.15);border-radius:99px;overflow:hidden;margin-bottom:14px}
+#ld .bf{height:100%;width:0%;background:#fff;border-radius:99px;transition:width .4s ease}
+#ld .st{font-size:11px;color:rgba(255,255,255,.6);font-weight:600;text-align:center}
+#ld .dt span{animation:dt 1.2s infinite;opacity:0}
+#ld .dt span:nth-child(2){animation-delay:.2s}
+#ld .dt span:nth-child(3){animation-delay:.4s}
+@keyframes dt{0%,100%{opacity:0}50%{opacity:1}}
+</style>
+<div id="ld">
+  <div class="lg">
+    <img src="https://companieslogo.com/img/orig/AZ2.F-d26946db.png?t=1720244490">
+    <div class="dv"></div>
+    <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Logo-engie.svg">
+  </div>
+  <div class="sp"></div>
+  <h2>PMJA — Dashboard Recebimento</h2>
+  <p>Gestão de Materiais</p>
+  <div class="bw"><div class="bf" id="ldbf"></div></div>
+  <div class="st" id="ldst">Conectando ao Google Sheets<span class="dt"><span>.</span><span>.</span><span>.</span></span></div>
+</div>
+<script>
+(function(){
+  var s=[{p:18,m:'Conectando ao Google Sheets'},{p:40,m:'Carregando dados de recebimento'},
+         {p:62,m:'Processando métricas'},{p:80,m:'Montando gráficos'},{p:95,m:'Quase pronto'}];
+  var i=0;
+  function n(){
+    if(i>=s.length)return;
+    var x=s[i++];
+    var b=document.getElementById('ldbf'),t=document.getElementById('ldst');
+    if(b)b.style.width=x.p+'%';
+    if(t)t.innerHTML=x.m+'<span class="dt"><span>.</span><span>.</span><span>.</span></span>';
+    setTimeout(n,950+Math.random()*550);
+  }
+  setTimeout(n,300);
+})();
+</script>
+""", unsafe_allow_html=True)
+
+# ── LOAD DATA ─────────────────────────────────────────────────────────
+df_recebimento = read_ws("recebimento")
+df_rec_dados   = read_ws("rec_dados")
+loading_placeholder.empty()
 
 # ── HELPERS ───────────────────────────────────────────────────────────
 def fmt(n):
@@ -72,24 +130,15 @@ def extrair_sistemas(df):
                 break
     return sorted(list(sistemas_set))
 
-def formatar_numero(num):
-    if pd.isna(num): return "0"
-    return f"{int(num):,}".replace(',', '.')
-
-# ── BUILD ALL FRAMES ──────────────────────────────────────────────────
+# ── BUILD FRAMES ──────────────────────────────────────────────────────
 def build_frames(df_plot, df_rec, sistemas, cores_sistemas, anos_unicos,
                  mes_max_dados, mes_max_rec, metricas_linha1, metricas_linha2,
                  metricas_rec, mapeamentos_rec):
-
     meses_pt = {1:'Jan',2:'Fev',3:'Mar',4:'Abr',5:'Mai',6:'Jun',
                 7:'Jul',8:'Ago',9:'Set',10:'Out',11:'Nov',12:'Dez'}
-
     frames = []
-
     for mes_atual in range(1, mes_max_dados + 1):
         frame = {"mes": mes_atual, "cards": {}, "linha1": [], "linha2": [], "linha3": []}
-
-        # ── cards ─────────────────────────────────────────────────────
         df_ate = df_plot[df_plot['mes'] <= mes_atual]
         for coluna, titulo, cor, sufixo in [
             ('qtd_descarregamentos', 'Descarregamentos', '#003a70', ''),
@@ -98,12 +147,8 @@ def build_frames(df_plot, df_rec, sistemas, cores_sistemas, anos_unicos,
             ('qtd_unidades_recebidos','Unidades Recebidas','#4d9fd6',''),
             ('qtd_itens_por_unidade','Itens por Unidade','#80b9e5', ''),
         ]:
-            frame["cards"][coluna] = {
-                "valor": formatar_numero(df_ate[coluna].sum()),
-                "sufixo": sufixo, "cor": cor, "titulo": titulo
-            }
-
-        # ── linha 1: 3 line charts ────────────────────────────────────
+            frame["cards"][coluna] = {"valor": fmt(df_ate[coluna].sum()),
+                                      "sufixo": sufixo, "cor": cor, "titulo": titulo}
         for config in metricas_linha1:
             col = config['coluna']
             traces = []
@@ -112,16 +157,13 @@ def build_frames(df_plot, df_rec, sistemas, cores_sistemas, anos_unicos,
                 if d.empty: continue
                 cor = config['cores'][idx_ano % len(config['cores'])]
                 traces.append({
-                    "ano": str(ano),
-                    "cor": cor,
+                    "ano": str(ano), "cor": cor,
                     "x": [int(x) for x in d['mes']],
                     "y": [float(v) for v in d[col]],
-                    "text": [formatar_numero(v) if not pd.isna(v) and v > 0 else "" for v in d[col]],
-                    "fill_rgba": f"rgba({int(cor[1:3],16)},{int(cor[3:5],16)},{int(cor[5:7],16)},0.1)"
+                    "text": [fmt(v) if not pd.isna(v) and v > 0 else "" for v in d[col]],
+                    "fill_rgba": "rgba({},{},{},0.1)".format(int(cor[1:3],16),int(cor[3:5],16),int(cor[5:7],16))
                 })
             frame["linha1"].append({"titulo": config['titulo'], "sufixo": config['sufixo'], "traces": traces})
-
-        # ── linha 2: 2 line charts ────────────────────────────────────
         for config in metricas_linha2:
             col = config['coluna']
             traces = []
@@ -130,16 +172,13 @@ def build_frames(df_plot, df_rec, sistemas, cores_sistemas, anos_unicos,
                 if d.empty: continue
                 cor = config['cores'][idx_ano % len(config['cores'])]
                 traces.append({
-                    "ano": str(ano),
-                    "cor": cor,
+                    "ano": str(ano), "cor": cor,
                     "x": [int(x) for x in d['mes']],
                     "y": [float(v) for v in d[col]],
-                    "text": [formatar_numero(v) if not pd.isna(v) and v > 0 else "" for v in d[col]],
-                    "fill_rgba": f"rgba({int(cor[1:3],16)},{int(cor[3:5],16)},{int(cor[5:7],16)},0.1)"
+                    "text": [fmt(v) if not pd.isna(v) and v > 0 else "" for v in d[col]],
+                    "fill_rgba": "rgba({},{},{},0.1)".format(int(cor[1:3],16),int(cor[3:5],16),int(cor[5:7],16))
                 })
             frame["linha2"].append({"titulo": config['titulo'], "sufixo": config['sufixo'], "traces": traces})
-
-        # ── linha 3: pizza + barH + barV ─────────────────────────────
         if df_rec is not None and mes_atual <= mes_max_rec:
             df_ate_rec = df_rec[df_rec['mes'] <= mes_atual]
             for idx_m, metrica_info in enumerate(metricas_rec):
@@ -149,105 +188,17 @@ def build_frames(df_plot, df_rec, sistemas, cores_sistemas, anos_unicos,
                     col_nome = next((c for c, s in mapeamento.items() if s == sistema), None)
                     if col_nome and col_nome in df_rec.columns:
                         total = float(df_ate_rec[col_nome].fillna(0).sum())
-                        valores.append(total)
-                        labels.append(sistema)
-                        cores.append(cores_sistemas[cat_idx])
-                frame["linha3"].append({
-                    "titulo": metrica_info['titulo'],
-                    "tipo": idx_m,
-                    "valores": valores, "labels": labels, "cores": cores
-                })
+                        valores.append(total); labels.append(sistema); cores.append(cores_sistemas[cat_idx])
+                frame["linha3"].append({"titulo": metrica_info['titulo'], "tipo": idx_m,
+                                        "valores": valores, "labels": labels, "cores": cores})
         else:
-            for metrica_info in metricas_rec:
-                frame["linha3"].append({"titulo": metrica_info['titulo'], "tipo": metricas_rec.index(metrica_info), "valores": [], "labels": [], "cores": []})
-
+            for idx_m, metrica_info in enumerate(metricas_rec):
+                frame["linha3"].append({"titulo": metrica_info['titulo'], "tipo": idx_m,
+                                        "valores": [], "labels": [], "cores": []})
         frames.append(frame)
-
     return frames, meses_pt
 
-# ── LOAD DATA ─────────────────────────────────────────────────────────
-# ── LOADING SCREEN ─────────────────────────────────────────────────
-loading_html = """
-<style>
-  *{margin:0;padding:0;box-sizing:border-box}
-  .overlay{
-    position:fixed;inset:0;
-    background:linear-gradient(135deg,#003a70 0%,#0056A3 100%);
-    display:flex;flex-direction:column;align-items:center;justify-content:center;
-    z-index:99999;font-family:'DM Sans',sans-serif;
-    transition:opacity .5s;
-  }
-  .logos{display:flex;align-items:center;gap:32px;margin-bottom:48px}
-  .logo-img{height:40px;filter:brightness(0) invert(1);opacity:.9}
-  .divider{width:1px;height:40px;background:rgba(255,255,255,.25)}
-  .title{font-size:22px;color:#fff;font-weight:800;letter-spacing:-.5px;
-    margin-bottom:4px;text-align:center;font-family:'Sora',sans-serif}
-  .subtitle{font-size:13px;color:rgba(255,255,255,.7);font-weight:600;
-    margin-bottom:52px;text-align:center}
-  .bar-wrap{width:280px;height:4px;background:rgba(255,255,255,.15);
-    border-radius:99px;overflow:hidden;margin-bottom:20px}
-  .bar-fill{height:100%;width:0%;background:#fff;border-radius:99px;transition:width .4s ease}
-  .status{font-size:12px;color:rgba(255,255,255,.65);font-weight:600;
-    letter-spacing:.3px;min-height:18px;text-align:center}
-  .dots span{animation:blink 1.2s infinite;opacity:0}
-  .dots span:nth-child(2){animation-delay:.2s}
-  .dots span:nth-child(3){animation-delay:.4s}
-  @keyframes blink{0%,100%{opacity:0}50%{opacity:1}}
-  .spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.2);
-    border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;
-    margin-bottom:32px}
-  @keyframes spin{to{transform:rotate(360deg)}}
-</style>
-<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Sora:wght@700;800&display=swap" rel="stylesheet">
-
-<div class="overlay" id="overlay">
-  <div class="logos">
-    <img class="logo-img" src="https://companieslogo.com/img/orig/AZ2.F-d26946db.png?t=1720244490" alt="AZ">
-    <div class="divider"></div>
-    <img class="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Logo-engie.svg" alt="Engie">
-  </div>
-  <div class="spinner"></div>
-  <div class="title">PMJA — Dashboard Recebimento</div>
-  <div class="subtitle">Gestão de Materiais</div>
-  <div class="bar-wrap"><div class="bar-fill" id="bar"></div></div>
-  <div class="status" id="status">
-    Conectando ao Google Sheets
-    <span class="dots"><span>.</span><span>.</span><span>.</span></span>
-  </div>
-</div>
-
-<script>
-var steps=[
-  {p:18, msg:'Conectando ao Google Sheets'},
-  {p:40, msg:'Carregando dados de recebimento'},
-  {p:62, msg:'Processando métricas'},
-  {p:80, msg:'Montando gráficos'},
-  {p:95, msg:'Quase pronto'}
-];
-var i=0;
-function next(){
-  if(i>=steps.length) return;
-  var s=steps[i++];
-  document.getElementById('bar').style.width=s.p+'%';
-  document.getElementById('status').innerHTML=
-    s.msg+'<span class="dots"><span>.</span><span>.</span><span>.</span></span>';
-  setTimeout(next, 950+Math.random()*550);
-}
-setTimeout(next, 300);
-</script>
-"""
-
-loading_placeholder = st.empty()
-
-with loading_placeholder:
-    components.html(loading_html, height=0)
-
-df_recebimento = read_ws("recebimento")
-df_rec_dados   = read_ws("rec_dados")
-
-loading_placeholder.empty()
-
-
+# ── MAIN ──────────────────────────────────────────────────────────────
 if df_recebimento is not None and not df_recebimento.empty:
     df_plot = df_recebimento.copy()
     colunas = ['mes_ano','qtd_descarregamentos','qtd_volumes_recebidos',
@@ -267,9 +218,9 @@ if df_recebimento is not None and not df_recebimento.empty:
     df_rec, sistemas, cores_sistemas, mes_max_rec = None, [], [], 0
     mapeamentos_rec = [{}, {}, {}]
     metricas_rec = [
-        {'palavra_chave': 'Volumes',          'titulo': 'Volumes Recebidos por Sistema',    'excluir': ['Unid.','unidade']},
-        {'palavra_chave': 'Unid. Itens',       'titulo': 'Unidades de Itens por Sistema',   'excluir': ['por unidade']},
-        {'palavra_chave': 'Itens por unidade', 'titulo': 'Itens por Unidade por Sistema',   'excluir': ['Unid. Itens']}
+        {'palavra_chave': 'Volumes',          'titulo': 'Volumes Recebidos por Sistema',  'excluir': ['Unid.','unidade']},
+        {'palavra_chave': 'Unid. Itens',       'titulo': 'Unidades de Itens por Sistema', 'excluir': ['por unidade']},
+        {'palavra_chave': 'Itens por unidade', 'titulo': 'Itens por Unidade por Sistema', 'excluir': ['Unid. Itens']}
     ]
     if df_rec_dados is not None and not df_rec_dados.empty:
         df_rec = df_rec_dados.copy()
@@ -295,25 +246,25 @@ if df_recebimento is not None and not df_recebimento.empty:
 
     metricas_linha1 = [
         {'coluna':'qtd_descarregamentos','titulo':'Descarregamentos',
-         'cores':['#003a70','#1a5a8f','#3379ae','#4d99cd'],'sufixo':''},
+         'cores':['#001f3f','#0056A3','#00a8e8','#7ecfef'],'sufixo':''},
         {'coluna':'peso_recebido','titulo':'Peso Recebido',
-         'cores':['#0075be','#3390cc','#66abd9','#99c6e6'],'sufixo':' kg'},
+         'cores':['#001f3f','#0056A3','#00a8e8','#7ecfef'],'sufixo':' kg'},
         {'coluna':'qtd_volumes_recebidos','titulo':'Volumes Recebidos',
-         'cores':['#005a9c','#3377b3','#6694c9','#99b1df'],'sufixo':''}
+         'cores':['#001f3f','#0056A3','#00a8e8','#7ecfef'],'sufixo':''}
     ]
     metricas_linha2 = [
         {'coluna':'qtd_unidades_recebidos','titulo':'Unidades Recebidas',
-         'cores':['#003a70','#266190','#4d88b0','#73afd0'],'sufixo':''},
+         'cores':['#001f3f','#0056A3','#00a8e8','#7ecfef'],'sufixo':''},
         {'coluna':'qtd_itens_por_unidade','titulo':'Itens por Unidade',
-         'cores':['#0075be','#3390cc','#66abd9','#99c6e6'],'sufixo':''}
+         'cores':['#001f3f','#0056A3','#00a8e8','#7ecfef'],'sufixo':''}
     ]
 
     def titulo_anos(config):
         parts = []
         for idx_ano, ano in enumerate(anos_unicos):
             cor = config['cores'][idx_ano % len(config['cores'])]
-            total = formatar_numero(df_plot[df_plot['ano']==ano][config['coluna']].sum())
-            parts.append(f"<span style='color:{cor};font-weight:700'>{ano}: {total}{config['sufixo']}</span>")
+            total = fmt(df_plot[df_plot['ano']==ano][config['coluna']].sum())
+            parts.append("<span style='color:{};font-weight:700'>{}: {}{}</span>".format(cor, ano, total, config['sufixo']))
         return " <span style='color:#666'>|</span> ".join(parts)
 
     def titulo_sistemas(idx_m):
@@ -323,9 +274,9 @@ if df_recebimento is not None and not df_recebimento.empty:
         for cat_idx, sistema in enumerate(sistemas):
             col_nome = next((c for c,s in mapa.items() if s==sistema), None)
             if col_nome:
-                total = formatar_numero(df_rec[col_nome].sum())
+                total = fmt(df_rec[col_nome].sum())
                 cor = cores_sistemas[cat_idx]
-                parts.append(f"<span style='color:{cor};font-weight:700'>{sistema}: {total}</span>")
+                parts.append("<span style='color:{};font-weight:700'>{}: {}</span>".format(cor, sistema, total))
         return " <span style='color:#666'>|</span> ".join(parts)
 
     frames, meses_pt = build_frames(
@@ -334,69 +285,77 @@ if df_recebimento is not None and not df_recebimento.empty:
         metricas_rec, mapeamentos_rec
     )
 
-    frames_json  = json.dumps(frames, ensure_ascii=False)
-    meses_json   = json.dumps(meses_pt)
-    anos_json    = json.dumps([int(a) for a in anos_unicos])
-
+    frames_json = json.dumps(frames, ensure_ascii=False)
+    meses_json  = json.dumps(meses_pt)
+    anos_json   = json.dumps([int(a) for a in anos_unicos])
     sub_l1 = json.dumps([titulo_anos(c) for c in metricas_linha1])
     sub_l2 = json.dumps([titulo_anos(c) for c in metricas_linha2])
     sub_l3 = json.dumps([titulo_sistemas(i) for i in range(3)])
 
-    html = f"""<!DOCTYPE html><html><head>
+    html = """<!DOCTYPE html>
+<html>
+<head>
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Sora:wght@700;800;900&display=swap" rel="stylesheet">
 <script src="https://cdn.plot.ly/plotly-2.27.0.min.js" charset="utf-8"></script>
 <style>
-*{{margin:0;padding:0;box-sizing:border-box}}
-html,body{{width:100%;height:100%;overflow:hidden;
+* { margin:0; padding:0; box-sizing:border-box; }
+html, body { width:100%; height:100%; overflow:hidden;
   background:linear-gradient(135deg,#f5f7fa 0%,#e8eef5 100%);
-  font-family:'DM Sans',sans-serif;}}
-.root{{display:grid;width:100%;height:100dvh;gap:3px;padding:4px;overflow:hidden;
-  grid-template-rows:auto auto 1fr 1fr 1fr;}}
-.hdr{{background:linear-gradient(135deg,#003a70 0%,#0056A3 100%);
-  border-radius:8px;padding:4px 14px;display:flex;align-items:center;justify-content:space-between;
-  box-shadow:0 4px 12px rgba(0,58,112,.12);}}
-.logo{{height:clamp(22px,3.2dvh,36px);filter:brightness(0) invert(1);opacity:.92}}
-.ht{{font-family:'Sora',sans-serif;font-size:clamp(12px,1.8dvh,20px);color:#fff;font-weight:800;letter-spacing:-.5px}}
-.hs{{font-family:'DM Sans',sans-serif;font-size:clamp(9px,1.2dvh,14px);color:rgba(255,255,255,.9);font-weight:700}}
-.cards{{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;}}
-.mc{{background:white;border-radius:8px;padding:clamp(3px,.5dvh,7px) clamp(5px,.6vw,12px);
-  border-left:3px solid;box-shadow:0 2px 8px rgba(0,58,112,.06);overflow:hidden;}}
-.ml{{font-family:'DM Sans',sans-serif;font-size:clamp(7px,.85dvh,11px);color:#6b7280;
-  font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;white-space:nowrap;}}
-.mv{{font-family:'Sora',sans-serif;font-size:clamp(12px,1.9dvh,22px);
-  font-weight:800;line-height:1;letter-spacing:-.4px;white-space:nowrap;}}
-.row3{{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;min-height:0;}}
-.row2{{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;min-height:0;}}
-.cb{{background:white;border-radius:8px;box-shadow:0 2px 8px rgba(0,58,112,.06);
-  overflow:visible;min-height:0;display:flex;flex-direction:column;}}
-.ct{{background:white;padding:3px 6px 0;border-radius:8px 8px 0 0;
-  border-bottom:1px solid #f0f0f0;flex-shrink:0;}}
-.ct-title{{font-family:'Sora',sans-serif;font-size:clamp(9px,1.1dvh,14px);
-  color:#1a1a1a;font-weight:800;text-align:center;}}
-.ct-sub{{text-align:center;font-size:clamp(7px,.8dvh,10px);font-weight:700;
-  margin-top:1px;line-height:1.3;}}
-.cp{{flex:1;min-height:0;overflow:visible;}}
-@media(max-width:900px){{
-  html,body{{overflow-y:auto!important;height:auto!important}}
-  .root{{height:auto!important;overflow:visible!important;grid-template-rows:auto!important}}
-  .cards{{grid-template-columns:repeat(3,1fr)!important}}
-  .row3{{grid-template-columns:repeat(2,1fr)!important;min-height:200px}}
-  .row2{{grid-template-columns:1fr 1fr!important;min-height:200px}}
-  .cb{{min-height:220px!important}}
-  .cp{{min-height:180px!important}}
-}}
-@media(max-width:600px){{
-  .cards{{grid-template-columns:repeat(2,1fr)!important}}
-  .row3,.row2{{grid-template-columns:1fr!important}}
-  .cb{{min-height:200px!important}}
-  .hs{{display:none}}
-  .hdr{{padding:4px 8px!important}}
-}}
+  font-family:'DM Sans',sans-serif; }
+.root { display:grid; width:100%; height:100dvh; gap:3px; padding:4px; overflow:hidden;
+  grid-template-rows:auto auto 1fr 1fr 1fr; }
+.hdr { background:linear-gradient(135deg,#003a70 0%,#0056A3 100%);
+  border-radius:8px; padding:4px 14px; display:flex; align-items:center;
+  justify-content:space-between; box-shadow:0 4px 12px rgba(0,58,112,.12); }
+.logo { height:clamp(22px,3.2dvh,36px); filter:brightness(0) invert(1); opacity:.92; }
+.ht { font-family:'Sora',sans-serif; font-size:clamp(12px,1.8dvh,20px);
+  color:#fff; font-weight:800; letter-spacing:-.5px; }
+.hs { font-family:'DM Sans',sans-serif; font-size:clamp(9px,1.2dvh,14px);
+  color:rgba(255,255,255,.9); font-weight:700; }
+.cards { display:grid; grid-template-columns:repeat(5,1fr); gap:3px; }
+.mc { background:white; border-radius:8px;
+  padding:clamp(3px,.5dvh,7px) clamp(5px,.6vw,12px);
+  border-left:3px solid; box-shadow:0 2px 8px rgba(0,58,112,.06); overflow:hidden; }
+.ml { font-family:'DM Sans',sans-serif; font-size:clamp(7px,.85dvh,11px);
+  color:#6b7280; font-weight:700; text-transform:uppercase;
+  letter-spacing:.4px; margin-bottom:2px; white-space:nowrap; }
+.mv { font-family:'Sora',sans-serif; font-size:clamp(12px,1.9dvh,22px);
+  font-weight:800; line-height:1; letter-spacing:-.4px; white-space:nowrap; }
+.row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; min-height:0; }
+.row2 { display:grid; grid-template-columns:repeat(2,1fr); gap:3px; min-height:0; }
+.cb { background:white; border-radius:8px; box-shadow:0 2px 8px rgba(0,58,112,.06);
+  overflow:visible; min-height:0; display:flex; flex-direction:column; }
+.ct { background:white; padding:3px 6px 0; border-radius:8px 8px 0 0;
+  border-bottom:1px solid #f0f0f0; flex-shrink:0; }
+.ct-title { font-family:'Sora',sans-serif; font-size:clamp(9px,1.1dvh,14px);
+  color:#1a1a1a; font-weight:800; text-align:center; }
+.ct-sub { text-align:center; font-size:clamp(7px,.8dvh,10px);
+  font-weight:700; margin-top:1px; line-height:1.3; }
+.cp { flex:1; min-height:0; overflow:visible; }
+@media(max-width:900px){
+  html,body { overflow:hidden!important; }
+  .root { height:100dvh!important; overflow:hidden!important; }
+  .cards { grid-template-columns:repeat(3,1fr)!important; }
+  .row3 { grid-template-columns:repeat(2,1fr)!important; }
+  .row2 { grid-template-columns:1fr 1fr!important; }
+  .cb { min-height:0!important; }
+  .cp { min-height:0!important; }
+}
+@media(max-width:600px){
+  html,body { overflow-y:auto!important; height:auto!important; }
+  .root { height:auto!important; overflow:visible!important; grid-template-rows:auto!important; }
+  .cards { grid-template-columns:repeat(2,1fr)!important; }
+  .row3,.row2 { grid-template-columns:1fr!important; }
+  .cb { height:260px!important; }
+  .cp { height:210px!important; flex:none!important; }
+  .hs { display:none; }
+  .hdr { padding:4px 8px!important; }
+}
 </style>
-</head><body>
+</head>
+<body>
 <div class="root">
-
   <div class="hdr">
     <img class="logo" src="https://companieslogo.com/img/orig/AZ2.F-d26946db.png?t=1720244490" alt="AZ">
     <div style="text-align:center;flex:1">
@@ -405,509 +364,431 @@ html,body{{width:100%;height:100%;overflow:hidden;
     </div>
     <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Logo-engie.svg" alt="Engie">
   </div>
-
   <div class="cards" id="cards-row"></div>
   <div class="row3" id="row1"></div>
   <div class="row2" id="row2"></div>
   <div class="row3" id="row3"></div>
-
 </div>
-
 <script>
-var FRAMES   = {frames_json};
-var MESES    = {meses_json};
-var ANOS     = {anos_json};
-var SUB_L1   = {sub_l1};
-var SUB_L2   = {sub_l2};
-var SUB_L3   = {sub_l3};
+var FRAMES   = __FRAMES__;
+var MESES    = __MESES__;
+var ANOS     = __ANOS__;
+var SUB_L1   = __SUB_L1__;
+var SUB_L2   = __SUB_L2__;
+var SUB_L3   = __SUB_L3__;
 
 var CARDS_CFG = [
-  {{col:'qtd_descarregamentos', titulo:'Descarregamentos',  cor:'#003a70', sufixo:''}},
-  {{col:'peso_recebido',        titulo:'Peso Recebido',     cor:'#005a9c', sufixo:' kg'}},
-  {{col:'qtd_volumes_recebidos',titulo:'Volumes Recebidos', cor:'#0075be', sufixo:''}},
-  {{col:'qtd_unidades_recebidos',titulo:'Unidades Recebidas',cor:'#4d9fd6',sufixo:''}},
-  {{col:'qtd_itens_por_unidade', titulo:'Itens por Unidade', cor:'#80b9e5', sufixo:''}}
+  {col:'qtd_descarregamentos', titulo:'Descarregamentos',   cor:'#003a70', sufixo:''},
+  {col:'peso_recebido',        titulo:'Peso Recebido',      cor:'#005a9c', sufixo:' kg'},
+  {col:'qtd_volumes_recebidos',titulo:'Volumes Recebidos',  cor:'#0075be', sufixo:''},
+  {col:'qtd_unidades_recebidos',titulo:'Unidades Recebidas',cor:'#4d9fd6', sufixo:''},
+  {col:'qtd_itens_por_unidade', titulo:'Itens por Unidade', cor:'#80b9e5', sufixo:''}
 ];
 
 var TITULOS_L1 = ['Descarregamentos','Peso Recebido','Volumes Recebidos'];
 var TITULOS_L2 = ['Unidades Recebidas','Itens por Unidade'];
 var TITULOS_L3 = ['Volumes Recebidos por Sistema','Unidades de Itens por Sistema','Itens por Unidade por Sistema'];
 
-var FRAME_MS = 900;
-var PAUSE_MS = 60000;
-var frameIdx = 0, animTimer = null, cdownTimer = null;
-var initialized = {{}};
+var FRAME_MS  = 900;
+var PAUSE_MS  = 60000;
+var frameIdx  = 0;
+var animTimer = null;
+var cdownTimer= null;
+var inited    = {};
 
-function buildDOM() {{
+function buildDOM() {
   var cr = document.getElementById('cards-row');
-  CARDS_CFG.forEach(function(c) {{
-    cr.innerHTML += '<div class="mc" style="border-left-color:'+c.cor+'" id="card_'+c.col+'">'
-      +'<div class="ml">'+c.titulo+'</div>'
-      +'<div class="mv" id="mv_'+c.col+'" style="color:'+c.cor+'">0'+c.sufixo+'</div></div>';
-  }});
-
+  CARDS_CFG.forEach(function(c) {
+    cr.innerHTML += '<div class="mc" style="border-left-color:'+c.cor+'">'
+      + '<div class="ml">'+c.titulo+'</div>'
+      + '<div class="mv" id="mv_'+c.col+'" style="color:'+c.cor+'">0'+c.sufixo+'</div></div>';
+  });
   var r1 = document.getElementById('row1');
-  for(var i=0;i<3;i++) {{
+  for (var i=0; i<3; i++) {
     r1.innerHTML += '<div class="cb"><div class="ct">'
-      +'<div class="ct-title">'+TITULOS_L1[i]+'</div>'
-      +'<div class="ct-sub" id="sub_l1_'+i+'">'+SUB_L1[i]+'</div></div>'
-      +'<div class="cp" id="l1_'+i+'"></div></div>';
-  }}
-
+      + '<div class="ct-title">'+TITULOS_L1[i]+'</div>'
+      + '<div class="ct-sub" id="sub_l1_'+i+'">'+SUB_L1[i]+'</div></div>'
+      + '<div class="cp" id="l1_'+i+'"></div></div>';
+  }
   var r2 = document.getElementById('row2');
-  for(var i=0;i<2;i++) {{
+  for (var i=0; i<2; i++) {
     r2.innerHTML += '<div class="cb"><div class="ct">'
-      +'<div class="ct-title">'+TITULOS_L2[i]+'</div>'
-      +'<div class="ct-sub" id="sub_l2_'+i+'">'+SUB_L2[i]+'</div></div>'
-      +'<div class="cp" id="l2_'+i+'"></div></div>';
-  }}
-
+      + '<div class="ct-title">'+TITULOS_L2[i]+'</div>'
+      + '<div class="ct-sub" id="sub_l2_'+i+'">'+SUB_L2[i]+'</div></div>'
+      + '<div class="cp" id="l2_'+i+'"></div></div>';
+  }
   var r3 = document.getElementById('row3');
-  for(var i=0;i<3;i++) {{
+  for (var i=0; i<3; i++) {
     r3.innerHTML += '<div class="cb"><div class="ct">'
-      +'<div class="ct-title">'+TITULOS_L3[i]+'</div>'
-      +'<div class="ct-sub" id="sub_l3_'+i+'">'+SUB_L3[i]+'</div></div>'
-      +'<div class="cp" id="l3_'+i+'"></div></div>';
-  }}
-}}
+      + '<div class="ct-title">'+TITULOS_L3[i]+'</div>'
+      + '<div class="ct-sub" id="sub_l3_'+i+'">'+SUB_L3[i]+'</div></div>'
+      + '<div class="cp" id="l3_'+i+'"></div></div>';
+  }
+}
 
-function gsize(id) {{
+function gsize(id) {
   var el = document.getElementById(id);
-  if(!el) return [200,150];
+  if (!el) return [200,150];
   return [el.clientWidth||200, el.clientHeight||150];
-}}
-var tickvals  = Object.keys(MESES).map(Number);
-var ticktext  = Object.values(MESES);
-
-// ── Line chart ─────────────────────────────────────────────────────
-// Labels em coordenadas Y de dados — anti-colisão real por mês.
-// Para cada mês agrupa todos os pontos, ordena por Y,
-// e empilha as annotations com offset mínimo garantido em unidades de dados.
-function renderLine(traces, elId, sufixo) {{
-  var wh = gsize(elId), data = [];
-  var n = traces.length;
+}
+
+var tickvals = Object.keys(MESES).map(Number);
+var ticktext = Object.values(MESES);
 
+function renderLine(traces, elId, sufixo) {
+  var wh = gsize(elId);
+  var data = [];
+  var n = traces.length;
   var allY = [];
-  traces.forEach(function(t){{ t.y.forEach(function(v){{if(v>=0) allY.push(v);}}); }});
+  traces.forEach(function(t){ t.y.forEach(function(v){ if(v>=0) allY.push(v); }); });
   var yMax = allY.length ? Math.max.apply(null,allY) : 1;
-
   var allX = [];
-  traces.forEach(function(t){{ t.x.forEach(function(v){{ allX.push(v); }}); }});
+  traces.forEach(function(t){ t.x.forEach(function(v){ allX.push(v); }); });
   var xMin  = allX.length ? Math.min.apply(null,allX) : 1;
   var xMax2 = allX.length ? Math.max.apply(null,allX) : 12;
-
-  // headroom: espaço acima do yMax para acomodar labels empilhados
-  // cada ano extra adiciona 8% — 1 ano=40%, 7 anos=88%
   var headroom = 1.40 + Math.max(0, n-1) * 0.08;
   var yTop = yMax * headroom;
-
-  // offset mínimo entre labels adjacentes = 5% do range total visível
   var MIN_OFFSET = yTop * 0.055;
 
-  traces.forEach(function(t, i) {{
-    data.push({{
+  traces.forEach(function(t, i) {
+    var rgba = t.fill_rgba;
+    data.push({
       type:'scatter', mode:'lines+markers',
       x:t.x, y:t.y,
       cliponaxis:false, showlegend:false, name:t.ano,
-      line:{{width:2.5, color:t.cor, shape:'spline'}},
-      marker:{{size:6, color:t.cor, line:{{width:1.5, color:'white'}}}},
+      line:{width:2.5, color:t.cor, shape:'spline'},
+      marker:{size:6, color:t.cor, line:{width:1.5, color:'white'}},
       fill: i>0 ? 'tonexty' : null,
-      fillcolor: t.fill_rgba,
-      hovertemplate:'<b>'+t.ano+'</b> %{{customdata}}: <b>%{{text}}</b>'+sufixo+'<extra></extra>',
-      customdata: t.x.map(function(m){{return MESES[m];}},),
+      fillcolor: rgba,
+      hovertemplate:'<b>'+t.ano+'</b> %{customdata}: <b>%{text}</b>'+sufixo+'<extra></extra>',
+      customdata: t.x.map(function(m){ return MESES[m]; }),
       text: t.text
-    }});
-  }});
-
-  // ── Coleta todos os pontos com label agrupados por mês ──
-  var byX = {{}};
-  traces.forEach(function(t) {{
-    t.x.forEach(function(mx, j) {{
-      if(!t.text[j]) return;
-      if(!byX[mx]) byX[mx] = [];
-      byX[mx].push({{ yv: t.y[j], txt: t.text[j], cor: t.cor }});
-    }});
-  }});
+    });
+  });
+
+  var byX = {};
+  traces.forEach(function(t) {
+    t.x.forEach(function(mx, j) {
+      if (!t.text[j]) return;
+      if (!byX[mx]) byX[mx] = [];
+      byX[mx].push({yv:t.y[j], txt:t.text[j], cor:t.cor});
+    });
+  });
 
   var annotations = [];
-
-  Object.keys(byX).forEach(function(mxStr) {{
+  Object.keys(byX).forEach(function(mxStr) {
     var mx  = parseInt(mxStr);
     var pts = byX[mx];
-
-    // Ordena crescente por valor Y
-    pts.sort(function(a,b){{ return a.yv - b.yv; }});
-
-    // Calcula posição Y da annotation para cada ponto:
-    // começa em yv + MIN_OFFSET e garante que cada próximo
-    // está pelo menos MIN_OFFSET acima do anterior
+    pts.sort(function(a,b){ return a.yv-b.yv; });
     var labelY = [];
-    pts.forEach(function(p, k) {{
+    pts.forEach(function(p, k) {
       var candidate = p.yv + MIN_OFFSET;
-      if(k > 0 && candidate < labelY[k-1] + MIN_OFFSET) {{
-        candidate = labelY[k-1] + MIN_OFFSET;
-      }}
+      if (k > 0 && candidate < labelY[k-1] + MIN_OFFSET) candidate = labelY[k-1] + MIN_OFFSET;
       labelY.push(candidate);
-    }});
-
-    // xanchor nas bordas para não vazar
-    var xanchor = mx === xMin ? 'left' : (mx === xMax2 ? 'right' : 'center');
-
-    pts.forEach(function(p, k) {{
-      annotations.push({{
-        x: mx, y: labelY[k],
-        xref:'x', yref:'y',
-        text: p.txt,
-        showarrow: false,
-        xanchor: xanchor,
-        yanchor: 'middle',
-        font: {{size:9, family:'DM Sans', color:'#111827'}},
-        bgcolor: 'rgba(0,0,0,0)',
-        borderpad: 0
-      }});
-    }});
-  }});
-
-  var layout = {{
-    width:wh[0], height:wh[1], autosize:false,
+    });
+    var xanchor = mx===xMin ? 'left' : (mx===xMax2 ? 'right' : 'center');
+    pts.forEach(function(p, k) {
+      annotations.push({
+        x:mx, y:labelY[k], xref:'x', yref:'y',
+        text:p.txt, showarrow:false,
+        xanchor:xanchor, yanchor:'middle',
+        font:{size:9, family:'DM Sans', color:'#111827'},
+        bgcolor:'rgba(0,0,0,0)', borderpad:0
+      });
+    });
+  });
+
+  var layout = {
+    autosize:true,
     hovermode:'x unified', template:'plotly_white',
-    font:{{family:'DM Sans',size:10}}, showlegend:false,
-    margin:{{l:42,r:18,t:24,b:36}},
+    font:{family:'DM Sans', size:10}, showlegend:false,
+    margin:{l:42,r:18,t:24,b:36},
     plot_bgcolor:'rgba(248,249,250,0.5)',
-    xaxis:{{
+    xaxis:{
       tickmode:'array', tickvals:tickvals, ticktext:ticktext,
-      tickangle:0, tickfont:{{size:9,family:'DM Sans',color:'#555'}},
+      tickangle:0, tickfont:{size:9,family:'DM Sans',color:'#555'},
       showgrid:true, gridwidth:1, gridcolor:'rgba(200,200,200,0.25)',
       fixedrange:true, range:[xMin-0.4, xMax2+0.4]
-    }},
-    yaxis:{{
-      tickfont:{{size:9,family:'DM Sans'}},
+    },
+    yaxis:{
+      tickfont:{size:9,family:'DM Sans'},
       showgrid:true, gridwidth:1, gridcolor:'rgba(200,200,200,0.25)',
       range:[0, yTop], fixedrange:true,
-      tickformat: yMax >= 100000 ? '.2s' : null
-    }},
-    annotations: annotations,
-    hoverlabel:{{bgcolor:'white',font_size:11,font_family:'DM Sans',bordercolor:'#ddd',namelength:-1}}
-  }};
+      tickformat: yMax>=100000 ? '.2s' : null
+    },
+    annotations:annotations,
+    hoverlabel:{bgcolor:'white',font_size:11,font_family:'DM Sans',bordercolor:'#ddd',namelength:-1}
+  };
+
   var el = document.getElementById(elId);
-  if(!initialized[elId]) {{
-    Plotly.newPlot(el, data, layout, {{displayModeBar:false,responsive:false}});
-    initialized[elId] = true;
-  }} else {{
+  if (!inited[elId]) {
+    Plotly.newPlot(el, data, layout, {displayModeBar:false, responsive:true});
+    inited[elId] = true;
+  } else {
     Plotly.react(el, data, layout);
-  }}
-}}
-
+  }
+}
 
-// ── Pizza ──────────────────────────────────────────────────────────
-function renderPizza(item, elId) {{
-  if(!item.valores.length) return;
-  var wh = gsize(elId);
-  var total = item.valores.reduce(function(s,v){{return s+v;}},0);
-  var labels = item.labels.map(function(l,i){{
+function renderPizza(item, elId) {
+  if (!item.valores.length) return;
+  var wh    = gsize(elId);
+  var total = item.valores.reduce(function(s,v){ return s+v; }, 0);
+  var labels = item.labels.map(function(l,i) {
     var pct = total>0 ? (item.valores[i]/total*100).toFixed(1) : '0.0';
-    var vf  = item.valores[i].toString().replace(/\\B(?=(\\d{{3}})+(?!\\d))/g,'.');
+    var vf  = item.valores[i].toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g,'.');
     return l+': '+vf+' ('+pct+'%)';
-  }});
-  var data = [{{
+  });
+  var data = [{
     type:'pie', labels:labels, values:item.valores,
-    marker:{{colors:item.cores, line:{{color:'white',width:2}}}},
+    marker:{colors:item.cores, line:{color:'white',width:2}},
     hole:0.3, textposition:'inside',
-    hovertemplate:'<b>%{{label}}</b><br>Volumes: %{{value:,.0f}}<br>Percentual: %{{percent}}<extra></extra>'
-  }}];
-  var layout = {{
-    width:wh[0],height:wh[1],autosize:false,
-    template:'plotly_white',
-    font:{{family:'DM Sans',size:9}}, showlegend:true,
-    legend:{{orientation:'v',yanchor:'middle',y:0.5,xanchor:'left',x:1.02,font:{{size:8.5}}}},
-    margin:{{l:20,r:150,t:8,b:8}},
-    hoverlabel:{{bgcolor:'white',font_size:11,font_family:'DM Sans',bordercolor:'#e0e0e0'}}
-  }};
+    hovertemplate:'<b>%{label}</b><br>Volumes: %{value:,.0f}<br>Percentual: %{percent}<extra></extra>'
+  }];
+  var layout = {
+    autosize:true,
+    template:'plotly_white', font:{family:'DM Sans',size:9}, showlegend:true,
+    legend:{orientation:'v',yanchor:'middle',y:0.5,xanchor:'left',x:1.02,font:{size:8.5}},
+    margin:{l:20,r:150,t:8,b:8},
+    hoverlabel:{bgcolor:'white',font_size:11,font_family:'DM Sans',bordercolor:'#e0e0e0'}
+  };
   var el = document.getElementById(elId);
-  if(!initialized[elId]) {{
-    Plotly.newPlot(el, data, layout, {{displayModeBar:false,responsive:false}});
-    initialized[elId] = true;
-  }} else {{
+  if (!inited[elId]) {
+    Plotly.newPlot(el, data, layout, {displayModeBar:false, responsive:true});
+    inited[elId] = true;
+  } else {
     Plotly.react(el, data, layout);
-  }}
-}}
-
-// ── Bar H ──────────────────────────────────────────────────────────
-// FIX: removida linha vertical esquerda (showline:false, zeroline:false)
-// FIX: margem esquerda maior para labels não ficarem grudados
-function renderBarH(item, elId) {{
-  if(!item.valores.length) return;
-  var wh = gsize(elId);
-  var maxVal = Math.max.apply(null, item.valores);
+  }
+}
+
+function fmtDot(v) {
+  if (v===null||v===undefined) return '0';
+  var n = Math.round(v);
+  if (n===0) return '0';
+  var s=n.toString(), r='', c=0;
+  for (var i=s.length-1; i>=0; i--) {
+    if (c>0 && c%3===0) r='.'+r;
+    r=s[i]+r; c++;
+  }
+  return r;
+}
 
-  function fmtDot(v) {{
-    if(v===null||v===undefined) return '0';
-    var n=Math.round(v); if(n===0) return '0';
-    var s=n.toString(),r='',c=0;
-    for(var i=s.length-1;i>=0;i--){{if(c>0&&c%3===0)r='.'+r;r=s[i]+r;c++;}}
-    return r;
-  }}
-
-  var pairs = item.labels.map(function(l,i){{return {{l:l,v:item.valores[i],c:item.cores[i]}};  }});
-  pairs.sort(function(a,b){{return b.v-a.v;}});
-  var sL = pairs.map(function(p){{return p.l;}});
-  var sV = pairs.map(function(p){{return p.v;}});
-  var sC = pairs.map(function(p){{return p.c;}});
-
-  var trackData = {{
+function renderBarH(item, elId) {
+  if (!item.valores.length) return;
+  var wh     = gsize(elId);
+  var maxVal = Math.max.apply(null, item.valores);
+  var pairs  = item.labels.map(function(l,i){ return {l:l,v:item.valores[i],c:item.cores[i]}; });
+  pairs.sort(function(a,b){ return b.v-a.v; });
+  var sL = pairs.map(function(p){ return p.l; });
+  var sV = pairs.map(function(p){ return p.v; });
+  var sC = pairs.map(function(p){ return p.c; });
+
+  var trackColors = sC.map(function(c) {
+    var r=parseInt(c.slice(1,3),16), g=parseInt(c.slice(3,5),16), b=parseInt(c.slice(5,7),16);
+    return 'rgba('+r+','+g+','+b+',0.12)';
+  });
+
+  var trackData = {
     type:'bar', orientation:'h',
-    x: sV.map(function(){{return maxVal;}}), y: sL,
-    marker:{{color:sC.map(function(c){{
-      var r=parseInt(c.slice(1,3),16),g=parseInt(c.slice(3,5),16),b=parseInt(c.slice(5,7),16);
-      return 'rgba('+r+','+g+','+b+',0.12)';
-    }}),line:{{width:0}}}},
+    x:sV.map(function(){ return maxVal; }), y:sL,
+    marker:{color:trackColors, line:{width:0}},
     hoverinfo:'skip', showlegend:false,
-    text:sL.map(function(){{return '';}})
-  }};
-
-  var barData = {{
+    text:sL.map(function(){ return ''; })
+  };
+  var barData = {
     type:'bar', orientation:'h',
     x:sV, y:sL,
-    marker:{{color:sC, line:{{width:0}}}},
-    hovertemplate:'<b>%{{y}}</b><br>%{{x:,.0f}}<extra></extra>',
+    marker:{color:sC, line:{width:0}},
+    hovertemplate:'<b>%{y}</b><br>%{x:,.0f}<extra></extra>',
     showlegend:false,
-    text:sL.map(function(){{return '';}})
-  }};
+    text:sL.map(function(){ return ''; })
+  };
 
   var threshold = maxVal * 0.20;
-  var annotations = sV.map(function(v,i){{
+  var annotations = sV.map(function(v,i) {
     var isShort = v < threshold;
-    return {{
-      x: isShort ? v + maxVal*0.015 : v - maxVal*0.015,
+    return {
+      x: isShort ? v+maxVal*0.015 : v-maxVal*0.015,
       y: sL[i],
-      text: '<b>'+fmtDot(v)+'</b>',
-      xref:'x', yref:'y',
-      showarrow:false,
+      text:'<b>'+fmtDot(v)+'</b>',
+      xref:'x', yref:'y', showarrow:false,
       xanchor: isShort ? 'left' : 'right',
       yanchor:'middle',
-      font:{{size:11,family:'DM Sans',color: isShort ? '#003a70' : 'white'}}
-    }};
-  }});
-
-  var layout = {{
-    width:wh[0], height:wh[1], autosize:false,
-    barmode:'overlay',
-    template:'plotly_white', showlegend:false,
-    font:{{family:'DM Sans',size:9}},
-    // FIX: margem esquerda aumentada para afastar labels do início do gráfico
-    margin:{{l:150,r:70,t:6,b:20}},
-    plot_bgcolor:'rgba(0,0,0,0)',
-    paper_bgcolor:'rgba(0,0,0,0)',
-    xaxis:{{visible:false, range:[0, maxVal*1.20], fixedrange:true}},
-    yaxis:{{
-      tickfont:{{size:10,family:'DM Sans',color:'#333',weight:700}},
-      showgrid:false,
-      // FIX: linha vertical esquerda removida
-      showline:false,
-      zeroline:false,
-      ticksuffix:'  ',
-      fixedrange:true,
-      automargin:true
-    }},
-    annotations: annotations,
-    hoverlabel:{{bgcolor:'white',font_size:11,font_family:'DM Sans',bordercolor:'#e0e0e0'}}
-  }};
+      font:{size:11, family:'DM Sans', color: isShort?'#003a70':'white'}
+    };
+  });
+
+  var layout = {
+    autosize:true,
+    barmode:'overlay', template:'plotly_white', showlegend:false,
+    font:{family:'DM Sans',size:9},
+    margin:{l:150,r:70,t:6,b:20},
+    plot_bgcolor:'rgba(0,0,0,0)', paper_bgcolor:'rgba(0,0,0,0)',
+    xaxis:{visible:false, range:[0,maxVal*1.20], fixedrange:true},
+    yaxis:{
+      tickfont:{size:10,family:'DM Sans',color:'#333'},
+      showgrid:false, showline:false, zeroline:false,
+      ticksuffix:'  ', fixedrange:true, automargin:true
+    },
+    annotations:annotations,
+    hoverlabel:{bgcolor:'white',font_size:11,font_family:'DM Sans',bordercolor:'#e0e0e0'}
+  };
 
   var el = document.getElementById(elId);
-  if(!initialized[elId]) {{
-    Plotly.newPlot(el, [trackData, barData], layout, {{displayModeBar:false,responsive:false}});
-    initialized[elId] = true;
-  }} else {{
+  if (!inited[elId]) {
+    Plotly.newPlot(el, [trackData, barData], layout, {displayModeBar:false, responsive:true});
+    inited[elId] = true;
+  } else {
     Plotly.react(el, [trackData, barData], layout);
-  }}
-
-  setTimeout(function() {{
-    el.querySelectorAll('.bars path').forEach(function(p) {{
-      var d=p.getAttribute('d'); if(!d) return;
-      var toks=d.match(/[A-Za-z][^A-Za-z]*/g)||[],cx=0,cy=0,aX=[],aY=[];
-      toks.forEach(function(tok){{
-        var cmd=tok[0];
-        var pts=tok.slice(1).trim().split(/[\\s,]+/).map(Number).filter(function(n){{return !isNaN(n);}});
-        if(cmd==='M'||cmd==='L'){{aX.push(pts[0]);aY.push(pts[1]);cx=pts[0];cy=pts[1];}}
-        else if(cmd==='H'){{aX.push(pts[0]);aY.push(cy);cx=pts[0];}}
-        else if(cmd==='V'){{aX.push(cx);aY.push(pts[0]);cy=pts[0];}}
-      }});
-      if(aX.length<2) return;
-      var x0=Math.min.apply(null,aX),x1=Math.max.apply(null,aX);
-      var y0=Math.min.apply(null,aY),y1=Math.max.apply(null,aY);
-      var w=x1-x0,h=y1-y0; if(w<=0||h<=0) return;
-      var r=Math.min(7,h/2);
-      var nd='M '+x0+','+y0
-        +' H '+(x1-r)+' Q '+x1+','+y0+' '+x1+','+(y0+r)
-        +' V '+(y1-r)+' Q '+x1+','+y1+' '+(x1-r)+','+y1
-        +' H '+x0+' Z';
-      p.setAttribute('d',nd);
-    }});
-  }},80);
-}}
-
-// ── Bar V ──────────────────────────────────────────────────────────
-// FIX: margem esquerda e inferior maiores para labels não grudarem
-function renderBarV(item, elId) {{
-  if(!item.valores.length) return;
-  var el = document.getElementById(elId);
-  var wh = gsize(elId);
-  var maxVal = Math.max.apply(null, item.valores);
-
-  function fmtDot(v) {{
-    if(!v || v===0) return '';
-    var s = Math.round(v).toString(), r='', c=0;
-    for(var i=s.length-1;i>=0;i--){{ if(c>0&&c%3===0) r='.'+r; r=s[i]+r; c++; }}
-    return r;
-  }}
+  }
+  roundBars(el, 8, 'h');
+}
 
-  var texts = item.valores.map(function(v){{ return v>0 ? fmtDot(v) : ''; }});
+function roundBars(boxEl, r, orientation) {
+  setTimeout(function() {
+    boxEl.querySelectorAll('.bars path').forEach(function(p) {
+      var d = p.getAttribute('d');
+      if (!d) return;
+      var tok = d.match(/[A-Za-z][^A-Za-z]*/g) || [];
+      var cx=0, cy=0, aX=[], aY=[];
+      tok.forEach(function(t) {
+        var cmd = t[0];
+        var pts = t.slice(1).trim().split(/[\\s,]+/).map(Number).filter(function(n){ return !isNaN(n); });
+        if (cmd==='M'||cmd==='L') { aX.push(pts[0]); aY.push(pts[1]); cx=pts[0]; cy=pts[1]; }
+        else if (cmd==='H') { aX.push(pts[0]); aY.push(cy); cx=pts[0]; }
+        else if (cmd==='V') { aX.push(cx); aY.push(pts[0]); cy=pts[0]; }
+      });
+      if (aX.length < 2) return;
+      var x0=Math.min.apply(null,aX), x1=Math.max.apply(null,aX);
+      var y0=Math.min.apply(null,aY), y1=Math.max.apply(null,aY);
+      var w=x1-x0, h=y1-y0;
+      if (w<=0 || h<=0) return;
+      var rr = Math.min(r, w/2, h/2);
+      var nd;
+      if (orientation === 'h') {
+        nd = 'M '+x0+','+y0
+           + ' H '+(x1-rr)+' Q '+x1+','+y0+' '+x1+','+(y0+rr)
+           + ' V '+(y1-rr)+' Q '+x1+','+y1+' '+(x1-rr)+','+y1
+           + ' H '+x0+' V '+y0+' Z';
+      } else {
+        nd = 'M '+x0+','+y1
+           + ' H '+x1
+           + ' V '+(y0+rr)
+           + ' Q '+x1+','+y0+' '+(x1-rr)+','+y0
+           + ' H '+(x0+rr)+' Q '+x0+','+y0+' '+x0+','+(y0+rr)
+           + ' V '+y1+' Z';
+      }
+      p.setAttribute('d', nd);
+    });
+  }, 80);
+}
 
-  var data = [{{
+function renderBarV(item, elId) {
+  if (!item.valores.length) return;
+  var el     = document.getElementById(elId);
+  var wh     = gsize(elId);
+  var maxVal = Math.max.apply(null, item.valores);
+  var texts  = item.valores.map(function(v){ return v>0 ? fmtDot(v) : ''; });
+  var data   = [{
     type:'bar',
     x:item.labels, y:item.valores,
-    text:texts,
-    textposition:'outside',
-    cliponaxis:false,
-    textfont:{{size:10,family:'DM Sans',color:'#333',weight:800}},
-    marker:{{color:item.cores, line:{{width:0}}, cornerradius:8}},
-    hovertemplate:'<b>%{{x}}</b><br>%{{y:,.0f}}<extra></extra>'
-  }}];
-
-  var layout = {{
-    width:wh[0], height:wh[1], autosize:false,
+    text:texts, textposition:'outside', cliponaxis:false,
+    textfont:{size:10,family:'DM Sans',color:'#333'},
+    marker:{color:item.cores, line:{width:0}},
+    hovertemplate:'<b>%{x}</b><br>%{y:,.0f}<extra></extra>'
+  }];
+  var layout = {
+    autosize:true,
     template:'plotly_white', showlegend:false,
-    font:{{family:'DM Sans',size:9}},
-    // FIX: margens ajustadas — esquerda maior, bottom maior para labels não grudarem
-    margin:{{l:30,r:20,t:40,b:90}},
-    plot_bgcolor:'rgba(248,249,250,0.5)',
-    paper_bgcolor:'white',
-    xaxis:{{
-      tickfont:{{size:8,family:'DM Sans',weight:700}},
-      tickangle:-35,
-      showgrid:false,
-      fixedrange:true,
-      // FIX: automargin para labels não serem cortados
-      automargin:true,
-      // FIX: standoff para afastar labels do eixo
-      ticklabelstandoff: 8
-    }},
-    yaxis:{{
-      tickfont:{{size:9,family:'DM Sans'}},
-      showgrid:true, gridwidth:1,
-      gridcolor:'rgba(200,200,200,0.2)',
-      range:[0, maxVal*1.35],
-      fixedrange:true
-    }},
-    hoverlabel:{{bgcolor:'white',font_size:11,font_family:'DM Sans',bordercolor:'#e0e0e0'}}
-  }};
-
+    font:{family:'DM Sans',size:9},
+    margin:{l:30,r:20,t:40,b:90},
+    plot_bgcolor:'rgba(248,249,250,0.5)', paper_bgcolor:'white',
+    xaxis:{
+      tickfont:{size:8,family:'DM Sans'},
+      tickangle:-35, showgrid:false, fixedrange:true,
+      automargin:true, ticklabelstandoff:8
+    },
+    yaxis:{
+      tickfont:{size:9,family:'DM Sans'},
+      showgrid:true, gridwidth:1, gridcolor:'rgba(200,200,200,0.2)',
+      range:[0, maxVal*1.35], fixedrange:true
+    },
+    hoverlabel:{bgcolor:'white',font_size:11,font_family:'DM Sans',bordercolor:'#e0e0e0'}
+  };
   el.style.overflow = 'visible';
-  if(el.parentElement) el.parentElement.style.overflow = 'visible';
-
-  if(!initialized[elId]) {{
-    Plotly.newPlot(el, data, layout, {{displayModeBar:false,responsive:false}});
-    initialized[elId] = true;
-  }} else {{
+  if (el.parentElement) el.parentElement.style.overflow = 'visible';
+  if (!inited[elId]) {
+    Plotly.newPlot(el, data, layout, {displayModeBar:false, responsive:true});
+    inited[elId] = true;
+  } else {
     Plotly.react(el, data, layout);
-  }}
+  }
   roundBars(el, 8, 'v');
-}}
-
-// ── Rounded bars ──────────────────────────────────────────────────
-function roundBars(boxEl, r, orientation) {{
-  setTimeout(function() {{
-    boxEl.querySelectorAll('.bars path').forEach(function(p) {{
-      var d=p.getAttribute('d'); if(!d) return;
-      var tokens=d.match(/[A-Za-z][^A-Za-z]*/g)||[];
-      var cx=0,cy=0,aX=[],aY=[];
-      tokens.forEach(function(tok) {{
-        var cmd=tok[0];
-        var pts=tok.slice(1).trim().split(/[\\s,]+/).map(Number).filter(function(n){{return !isNaN(n);}});
-        if(cmd==='M'||cmd==='L'){{aX.push(pts[0]);aY.push(pts[1]);cx=pts[0];cy=pts[1];}}
-        else if(cmd==='H'){{aX.push(pts[0]);aY.push(cy);cx=pts[0];}}
-        else if(cmd==='V'){{aX.push(cx);aY.push(pts[0]);cy=pts[0];}}
-      }});
-      if(aX.length<2) return;
-      var x0=Math.min.apply(null,aX),x1=Math.max.apply(null,aX);
-      var y0=Math.min.apply(null,aY),y1=Math.max.apply(null,aY);
-      var w=x1-x0,h=y1-y0; if(w<=0||h<=0) return;
-      var rr=Math.min(r,w/2,h/2), nd;
-      if(orientation==='h') {{
-        nd='M '+x0+','+(y0+rr)+' Q '+x0+','+y0+' '+(x0+rr)+','+y0
-          +' H '+(x1-rr)+' Q '+x1+','+y0+' '+x1+','+(y0+rr)
-          +' V '+(y1-rr)+' Q '+x1+','+y1+' '+(x1-rr)+','+y1
-          +' H '+(x0+rr)+' Q '+x0+','+y1+' '+x0+','+(y1-rr)+' Z';
-      }} else {{
-        nd='M '+x0+','+y1+' V '+(y0+rr)
-          +' Q '+x0+','+y0+' '+(x0+rr)+','+y0
-          +' H '+(x1-rr)+' Q '+x1+','+y0+' '+x1+','+(y0+rr)
-          +' V '+y1+' Z';
-      }}
-      p.setAttribute('d',nd);
-    }});
-  }},60);
-}}
-
-// ── Render frame ──────────────────────────────────────────────────
-function renderFrame(f) {{
-  CARDS_CFG.forEach(function(c) {{
+}
+
+function renderFrame(f) {
+  CARDS_CFG.forEach(function(c) {
     var cd = f.cards[c.col];
-    if(cd) document.getElementById('mv_'+c.col).textContent = cd.valor + cd.sufixo;
-  }});
-  f.linha1.forEach(function(item, i) {{ renderLine(item.traces, 'l1_'+i, item.sufixo); }});
-  f.linha2.forEach(function(item, i) {{ renderLine(item.traces, 'l2_'+i, item.sufixo); }});
-  f.linha3.forEach(function(item, i) {{
-    if(item.tipo===0)      renderPizza(item,'l3_'+i);
-    else if(item.tipo===1) renderBarH(item,'l3_'+i);
-    else if(item.tipo===2) renderBarV(item,'l3_'+i);
-  }});
-}}
-
-// ── Animation ─────────────────────────────────────────────────────
-function stepFrame() {{
+    if (cd) document.getElementById('mv_'+c.col).textContent = cd.valor + cd.sufixo;
+  });
+  f.linha1.forEach(function(item, i) { renderLine(item.traces, 'l1_'+i, item.sufixo); });
+  f.linha2.forEach(function(item, i) { renderLine(item.traces, 'l2_'+i, item.sufixo); });
+  f.linha3.forEach(function(item, i) {
+    if      (item.tipo===0) renderPizza(item, 'l3_'+i);
+    else if (item.tipo===1) renderBarH(item,  'l3_'+i);
+    else if (item.tipo===2) renderBarV(item,  'l3_'+i);
+  });
+}
+
+function stepFrame() {
   renderFrame(FRAMES[frameIdx]);
   frameIdx++;
-  if(frameIdx >= FRAMES.length) {{
+  if (frameIdx >= FRAMES.length) {
     clearTimeout(animTimer);
-    cdownTimer = setTimeout(function() {{
-      frameIdx = 0;
-      startAnimation();
-    }}, PAUSE_MS);
-  }} else {{
+    cdownTimer = setTimeout(function(){ frameIdx=0; startAnimation(); }, PAUSE_MS);
+  } else {
     animTimer = setTimeout(stepFrame, FRAME_MS);
-  }}
-}}
+  }
+}
 
-function startAnimation() {{
+function startAnimation() {
   clearTimeout(animTimer);
   clearTimeout(cdownTimer);
   animTimer = setTimeout(stepFrame, FRAME_MS);
-}}
+}
 
 var _rt;
-window.addEventListener('resize', function() {{
+window.addEventListener('resize', function() {
   clearTimeout(_rt);
-  _rt = setTimeout(function() {{
-    document.querySelectorAll('.cp').forEach(function(box) {{
-      if(box.data) Plotly.relayout(box, {{width:box.clientWidth, height:box.clientHeight}});
-    }});
-  }}, 200);
-}});
-
-window.addEventListener('load', function() {{
+  _rt = setTimeout(function() {
+    document.querySelectorAll('.cp').forEach(function(box) {
+      if (box.data) Plotly.relayout(box, {width:box.clientWidth, height:box.clientHeight});
+    });
+  }, 200);
+});
+
+window.addEventListener('load', function() {
   buildDOM();
-  setTimeout(function() {{ frameIdx=0; startAnimation(); }}, 400);
-}});
+  setTimeout(function(){ frameIdx=0; startAnimation(); }, 400);
+});
 </script>
-</body></html>"""
+</body>
+</html>"""
+
+    html = (html
+        .replace('__FRAMES__', frames_json)
+        .replace('__MESES__',  meses_json)
+        .replace('__ANOS__',   anos_json)
+        .replace('__SUB_L1__', sub_l1)
+        .replace('__SUB_L2__', sub_l2)
+        .replace('__SUB_L3__', sub_l3)
+    )
 
-    components.html(html, height=8000, scrolling=False)
+    components.html(html, height=8000, scrolling=True)
 
 else:
-    components.html("""<!DOCTYPE html><html><body style='display:flex;align-items:center;
-    justify-content:center;height:100dvh;font-family:sans-serif;color:#003a70;background:#f5f7fa;'>
-    <div style='text-align:center'><div style='font-size:2em'>📊</div>
+    components.html("""<!DOCTYPE html><html><body style="display:flex;align-items:center;
+    justify-content:center;height:100dvh;font-family:sans-serif;color:#003a70;background:#f5f7fa;">
+    <div style="text-align:center"><div style="font-size:2em">📊</div>
     <p>Aguardando dados... Recarregue a página.</p></div></body></html>""",
     height=4000, scrolling=False)