feat: redesign da lista e formulario de cliente (cartoes, grid, tabela responsiva)

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

app/templates/cliente_form.html

@@ -24,9 +24,13 @@
       Não foi possível salvar: {{ erro_gravacao }}
     </div>
   {% endif %}
+  <div class="cartao">
     <form method="post">
       <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+      <div class="grid-form">
         {% for campo in campos %}
+          {% set largura_total = campo in ["OBS"] %}
+          <div class="{{ 'grid-form-largura-total' if largura_total }}">
             <label for="{{ campo }}">{{ campo }}{% if campo in campos_obrigatorios %} *{% endif %}</label>
             {% if campo in ["DATA_CONTRATO", "VENCIMENTO_CONTRATO"] %}
               <input type="date" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
@@ -35,13 +39,16 @@
             {% else %}
               <input type="text" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
               {% if campo == "CNPJ" %}
-          <small id="cnpj-status" style="display:block;color:#a1a1aa;margin-top:4px"></small>
+                <small id="cnpj-status" style="display:block;color:var(--cor-texto-secundario);margin-top:4px"></small>
               {% endif %}
             {% endif %}
+          </div>
         {% endfor %}
+      </div>
       <p><small>* campos obrigatórios. Os demais podem ficar em branco — implantação/mensalidade/juros ficam 0,00 e as datas de contrato ficam com a data de hoje até serem ajustadas.</small></p>
       <button type="submit">Salvar</button>
     </form>
+  </div>
 
 <script>
 (function () {

app/templates/clientes_lista.html

@@ -3,6 +3,7 @@
 {% block titulo %}Clientes{% endblock %}
 {% block conteudo %}
   <h1>Clientes</h1>
+  <div class="cartao">
     <form method="get" action="/clientes">
       <label for="ordenar_por">Buscar/ordenar por</label>
       <select id="ordenar_por" name="ordenar_por">
@@ -14,7 +15,9 @@
       <input type="text" name="busca" value="{{ busca or '' }}" placeholder="Buscar só no campo escolhido acima">
       <button type="submit">Buscar</button>
     </form>
+  </div>
   <p><a class="botao" href="/clientes/novo">+ Novo cliente</a></p>
+  <div class="tabela-wrap">
     <table>
       <tr>
         {% set colunas_tabela = [("codigo", "Código"), ("razao", "Razão"), ("fantasia", "Fantasia"), ("cnpj", "CNPJ")] %}
@@ -38,15 +41,16 @@
       </tr>
       {% endfor %}
     </table>
+  </div>
   {% if total_paginas and total_paginas > 1 %}
-    <p>
+    <div class="paginacao">
       {% if pagina > 1 %}
         <a class="botao" href="/clientes?pagina={{ pagina - 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">&larr; Anterior</a>
       {% endif %}
-      Página {{ pagina }} de {{ total_paginas }} ({{ total }} clientes)
+      <span>Página {{ pagina }} de {{ total_paginas }} ({{ total }} clientes)</span>
       {% if pagina < total_paginas %}
         <a class="botao" href="/clientes?pagina={{ pagina + 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">Próxima &rarr;</a>
       {% endif %}
-    </p>
+    </div>
   {% endif %}
 {% endblock %}