feat: rotas e telas de CLIENTE (listar, criar, editar, detalhe, excluir)

app/templates/base.html

@@ -0,0 +1,35 @@
+<!-- app/templates/base.html -->
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <title>{% block titulo %}Painel de Clientes{% endblock %}</title>
+  <style>
+    body { font-family: system-ui, sans-serif; margin: 0; background: #17171a; color: #f4f4f5; }
+    nav { background: #232326; padding: 12px 20px; display: flex; gap: 16px; }
+    nav a { color: #f4f4f5; text-decoration: none; }
+    nav a:hover { color: #F5821F; }
+    main { padding: 20px; max-width: 960px; margin: 0 auto; }
+    table { width: 100%; border-collapse: collapse; margin-top: 12px; }
+    th, td { text-align: left; padding: 8px; border-bottom: 1px solid #3a3a3e; }
+    input, select { padding: 8px; border-radius: 6px; border: 1px solid #3a3a3e; background: #17171a; color: #f4f4f5; width: 100%; box-sizing: border-box; }
+    label { display: block; margin-top: 10px; font-size: 0.85rem; color: #a1a1aa; }
+    button { margin-top: 14px; padding: 10px 16px; border: none; border-radius: 6px; background: #F5821F; color: #17171a; font-weight: 700; cursor: pointer; }
+    .mensagem { padding: 10px; border-radius: 6px; margin-bottom: 12px; }
+    .mensagem.success { background: #14532d; }
+    .mensagem.danger { background: #7f1d1d; }
+    .mensagem.warning { background: #78350f; }
+    a.botao { display: inline-block; padding: 6px 10px; border: 1px solid #3a3a3e; border-radius: 6px; color: #f4f4f5; text-decoration: none; margin-right: 6px; }
+  </style>
+</head>
+<body>
+  <nav>
+    <a href="/clientes">Clientes</a>
+    <a href="/gerador-chave">Gerador de chave</a>
+  </nav>
+  <main>
+    {% if mensagem %}<div class="mensagem {{ mensagem_tipo or 'success' }}">{{ mensagem }}</div>{% endif %}
+    {% block conteudo %}{% endblock %}
+  </main>
+</body>
+</html>