feat: redesign do detalhe de cliente (contatos e status de chaves)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/templates/cliente_detalhe.html

@@ -2,8 +2,8 @@
 {% extends "base.html" %}
 {% block titulo %}{{ cliente.RAZAO }}{% endblock %}
 {% block conteudo %}
-  <h1>{{ cliente.FANTASIA }} <small>({{ cliente.CODIGO }})</small></h1>
-  <p>{{ cliente.RAZAO }} — {{ cliente.CNPJ }}</p>
+  <h1>{{ cliente.FANTASIA }} <small style="color:var(--cor-texto-secundario)">({{ cliente.CODIGO }})</small></h1>
+  <p style="color:var(--cor-texto-secundario)">{{ cliente.RAZAO }} — {{ cliente.CNPJ }}</p>
   <p>
     <a class="botao" href="/clientes/{{ cliente.ID }}/editar">Editar</a>
     <form method="post" action="/clientes/{{ cliente.ID }}/excluir" style="display:inline">
@@ -13,50 +13,56 @@
   </p>
 
   <h2>Contatos</h2>
-  <table>
-    <tr><th>Nome</th><th>Telefone</th><th>E-mail</th><th></th></tr>
-    {% for ct in contatos %}
-    <tr>
-      <td>{{ ct.NOME }}</td><td>{{ ct.TELEFONE }}</td><td>{{ ct.EMAIL or "" }}</td>
-      <td>
-        <details style="display:inline-block">
-          <summary class="botao" style="display:inline-block;cursor:pointer">Editar</summary>
-          <form method="post" action="/clientes/{{ cliente.ID }}/contatos/{{ ct.ID }}/editar" style="margin-top:8px">
+  <div class="tabela-wrap">
+    <table>
+      <tr><th>Nome</th><th>Telefone</th><th>E-mail</th><th></th></tr>
+      {% for ct in contatos %}
+      <tr>
+        <td>{{ ct.NOME }}</td><td>{{ ct.TELEFONE }}</td><td>{{ ct.EMAIL or "" }}</td>
+        <td>
+          <details style="display:inline-block">
+            <summary class="botao" style="display:inline-block;cursor:pointer">Editar</summary>
+            <form method="post" action="/clientes/{{ cliente.ID }}/contatos/{{ ct.ID }}/editar" style="margin-top:8px">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+              <label for="nome-{{ ct.ID }}">Nome</label>
+              <input type="text" id="nome-{{ ct.ID }}" name="nome" value="{{ ct.NOME or '' }}">
+              <label for="telefone-{{ ct.ID }}">Telefone</label>
+              <input type="text" id="telefone-{{ ct.ID }}" name="telefone" value="{{ ct.TELEFONE }}" required>
+              <label for="email-{{ ct.ID }}">E-mail</label>
+              <input type="text" id="email-{{ ct.ID }}" name="email" value="{{ ct.EMAIL or '' }}">
+              <button type="submit">Salvar</button>
+            </form>
+          </details>
+          <form method="post" action="/clientes/{{ cliente.ID }}/contatos/{{ ct.ID }}/excluir" style="display:inline">
             <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-            <label for="nome-{{ ct.ID }}">Nome</label>
-            <input type="text" id="nome-{{ ct.ID }}" name="nome" value="{{ ct.NOME or '' }}">
-            <label for="telefone-{{ ct.ID }}">Telefone</label>
-            <input type="text" id="telefone-{{ ct.ID }}" name="telefone" value="{{ ct.TELEFONE }}" required>
-            <label for="email-{{ ct.ID }}">E-mail</label>
-            <input type="text" id="email-{{ ct.ID }}" name="email" value="{{ ct.EMAIL or '' }}">
-            <button type="submit">Salvar</button>
+            <button type="submit" onclick="return confirm('Excluir este contato?')">Excluir</button>
           </form>
-        </details>
-        <form method="post" action="/clientes/{{ cliente.ID }}/contatos/{{ ct.ID }}/excluir" style="display:inline">
-          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-          <button type="submit" onclick="return confirm('Excluir este contato?')">Excluir</button>
-        </form>
-      </td>
-    </tr>
-    {% endfor %}
-  </table>
-  <form method="post" action="/clientes/{{ cliente.ID }}/contatos">
-    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-    <label for="nome">Nome</label>
-    <input type="text" id="nome" name="nome">
-    <label for="telefone">Telefone</label>
-    <input type="text" id="telefone" name="telefone" required>
-    <label for="email">E-mail</label>
-    <input type="text" id="email" name="email">
-    <button type="submit">Adicionar contato</button>
-  </form>
+        </td>
+      </tr>
+      {% endfor %}
+    </table>
+  </div>
+  <div class="cartao">
+    <form method="post" action="/clientes/{{ cliente.ID }}/contatos">
+      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+      <label for="nome">Nome</label>
+      <input type="text" id="nome" name="nome">
+      <label for="telefone">Telefone</label>
+      <input type="text" id="telefone" name="telefone" required>
+      <label for="email">E-mail</label>
+      <input type="text" id="email" name="email">
+      <button type="submit">Adicionar contato</button>
+    </form>
+  </div>
 
   <h2>Status em Clientes_Chaves</h2>
   {% if status_chaves %}
-    <table>
-      <tr>{% for mes in status_chaves.meses %}<th>{{ mes }}</th>{% endfor %}</tr>
-      <tr>{% for mes, valor in status_chaves.meses.items() %}<td>{{ "✓" if valor else "—" }}</td>{% endfor %}</tr>
-    </table>
+    <div class="tabela-wrap">
+      <table>
+        <tr>{% for mes in status_chaves.meses %}<th>{{ mes }}</th>{% endfor %}</tr>
+        <tr>{% for mes, valor in status_chaves.meses.items() %}<td>{{ "✓" if valor else "—" }}</td>{% endfor %}</tr>
+      </table>
+    </div>
   {% else %}
     <p>Nenhuma linha em Clientes_Chaves para o código {{ cliente.CODIGO }}.</p>
   {% endif %}