From 3f5027962a8936f3d6b7eb361acec63c27bb277c Mon Sep 17 00:00:00 2001
From: Soporte ZH Consultores <soporte@zh.com.pa>
Date: Mon, 11 May 2026 20:22:50 +0000
Subject: [PATCH] style(tramites): estandarizar barra superior con Control de
 Escrituras
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Header pasa de "h1 + hdr-btns chiquitos" al patrón de Escrituras:
  izq = botón "← Portal" + logo (mark + AALN Law + Control de Trámites
  Legales), der = sync-status + user-chip con avatar e iniciales +
  botón "Cerrar sesión".
* Mismo navy + 3px gold border-bottom, mismo height 58px, sticky top.
* Pulse animation en sync-dot (igual que Escrituras).
* Carga DM Serif Display + DM Sans para que la tipografía del header
  coincida con Escrituras.
* setUserChip() pobla avatar (iniciales) y nombre tras loadAll.
* Pestañas de departamentos quedan como estaban — solo el header se
  estandarizó.
---
 views/tramites.html | 81 +++++++++++++++++++++++++++++++++++----------
 1 file changed, 63 insertions(+), 18 deletions(-)

diff --git a/views/tramites.html b/views/tramites.html
index 7c4683b..1e9ffea 100644
--- a/views/tramites.html
+++ b/views/tramites.html
@@ -4,20 +4,35 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>Control de Trámites Legales — AALN</title>
+<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+Serif+Display&family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
 <style>
 :root{--navy:#1B3A6B;--gold:#C9A84C;--gold-light:#f5e6c2;--red:#c0392b;--green:#27ae60;--blue:#2980b9;--gray:#6c757d;--bg:#f4f6fa;--white:#fff;--border:#dee2e6;--text:#212529;}
 *{box-sizing:border-box;margin:0;padding:0;}
 body{font-family:'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);font-size:13px;}
-header{background:var(--navy);color:#fff;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 8px rgba(0,0,0,.3);}
-header h1{font-size:17px;font-weight:700;letter-spacing:.5px;}
-header h1 span{color:var(--gold);}
-.hdr-btns{display:flex;gap:8px;align-items:center;}
-.hdr-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;padding:5px 12px;border-radius:4px;cursor:pointer;font-size:12px;transition:.2s;text-decoration:none;}
-.hdr-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);}
-.hdr-user{display:flex;align-items:center;gap:8px;font-size:11.5px;color:rgba(255,255,255,.85);padding:4px 10px;background:rgba(255,255,255,.08);border-radius:14px;}
-.sync-dot{width:7px;height:7px;border-radius:50%;background:#4CAF50;}
+/* HEADER — estandarizado con Control de Escrituras */
+header{background:var(--navy);border-bottom:3px solid var(--gold);padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:58px;position:sticky;top:0;z-index:200;font-family:'DM Sans',system-ui,sans-serif;}
+.header-left{display:flex;align-items:center;gap:14px;}
+.btn-back{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.9);padding:6px 12px 6px 9px;border-radius:8px;font-size:12px;text-decoration:none;transition:all .15s;white-space:nowrap;}
+.btn-back:hover{background:var(--gold);border-color:var(--gold);color:var(--navy);}
+.btn-back svg{width:14px;height:14px;}
+.logo{display:flex;align-items:center;gap:14px;}
+.logo-mark{width:32px;height:32px;background:var(--gold);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'DM Serif Display',Georgia,serif;font-size:15px;color:var(--navy);flex-shrink:0;}
+.logo-text{display:flex;flex-direction:column;line-height:1.2;}
+.logo-firm{font-size:11px;font-weight:600;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;}
+.logo-tool{font-size:13px;font-weight:400;color:rgba(255,255,255,0.85);}
+.header-right{display:flex;align-items:center;gap:16px;}
+.sync-status{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,0.55);}
+.sync-dot{width:7px;height:7px;border-radius:50%;background:#4CAF50;animation:pulse 2.5s ease-in-out infinite;}
 .sync-dot.syncing{background:var(--gold);}
-.sync-dot.error{background:#ef5350;}
+.sync-dot.error{background:#ef5350;animation:none;}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
+.user-chip{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.15);border-radius:20px;padding:5px 12px 5px 6px;}
+.user-avatar{width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;font-family:'DM Sans',sans-serif;}
+.user-name{font-size:12px;color:rgba(255,255,255,0.85);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.btn-logout{font-size:11px;padding:4px 10px;border:1px solid rgba(255,255,255,0.20);border-radius:6px;background:transparent;color:rgba(255,255,255,0.70);cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;text-decoration:none;display:inline-block;line-height:1.6;}
+.btn-logout:hover{background:rgba(255,255,255,0.10);color:#fff;border-color:rgba(255,255,255,0.30);}
 .tabs{display:flex;background:var(--navy);padding:0 16px;gap:2px;border-bottom:3px solid var(--gold);}
 .tab{padding:10px 18px;color:rgba(255,255,255,.65);cursor:pointer;font-size:12.5px;font-weight:600;border-radius:4px 4px 0 0;transition:.2s;white-space:nowrap;}
 .tab:hover{color:#fff;background:rgba(255,255,255,.1);}
@@ -111,14 +126,29 @@ tr.expanded>td{background:#fffdf5;}
 <body>
 
 <header>
-  <h1>⚖️ <span>AALN</span> — Control de Trámites Legales</h1>
-  <div class="hdr-btns">
-    <span class="hdr-user">
-      <span class="sync-dot" id="sync-dot"></span>
-      <span id="sync-label">Cargando…</span>
-    </span>
-    <a class="hdr-btn" href="/">← Portal</a>
-    <a class="hdr-btn" href="/auth/logout.php" onclick="return confirm('¿Cerrar sesión?')">Salir</a>
+  <div class="header-left">
+    <a class="btn-back" href="/" title="Volver al portal Donna">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
+      Portal
+    </a>
+    <div class="logo">
+      <div class="logo-mark">A</div>
+      <div class="logo-text">
+        <span class="logo-firm">AALN Law</span>
+        <span class="logo-tool">Control de Trámites Legales</span>
+      </div>
+    </div>
+  </div>
+  <div class="header-right">
+    <div class="sync-status">
+      <div class="sync-dot" id="sync-dot"></div>
+      <span id="sync-label">Conectando…</span>
+    </div>
+    <div class="user-chip">
+      <div class="user-avatar" id="user-avatar">?</div>
+      <span class="user-name" id="user-name">Cargando…</span>
+    </div>
+    <a class="btn-logout" href="/auth/logout.php" onclick="return confirm('¿Cerrar sesión?');">Cerrar sesión</a>
   </div>
 </header>
 
@@ -174,6 +204,20 @@ function setSync(state,label){
   dot.className='sync-dot'+(state!=='ok'?' '+state:'');
   document.getElementById('sync-label').textContent=label;
 }
+function initials(text){
+  const parts=String(text||'').replace(/[@._-]/g,' ').trim().split(/\s+/);
+  const a=(parts[0]||'').charAt(0);
+  const b=(parts[1]||'').charAt(0);
+  return (a+b).toUpperCase()||'?';
+}
+function setUserChip(){
+  const email=authUser.email||'';
+  const name=authUser.name||email;
+  const av=document.getElementById('user-avatar');
+  const nm=document.getElementById('user-name');
+  if(av) av.textContent=initials(name||email);
+  if(nm) { nm.textContent=name||email||'Conectado'; nm.title=email; }
+}
 function toast(msg,type='ok'){
   const el=document.getElementById('toast');
   el.textContent=msg;
@@ -241,7 +285,8 @@ async function loadAll(){
       mig:  (payload.mig  || []).map(adaptRow),
       lit:  (payload.lit  || []).map(adaptRow),
     };
-    setSync('ok', authUser.email ? authUser.email.split('@')[0] : 'Conectado');
+    setSync('ok', 'Sincronizado');
+    setUserChip();
     renderAll();
   } catch(e){
     setSync('error','Sin conexión');