Update app/templates/base.html.j2

app/templates/base.html.j2

@@ -4,35 +4,73 @@
     <meta charset="UTF-8" />
     <title>{{ doc.metadata.description or "Documentación de Script" }}</title>
 
-    <!-- Fuente corporativa desde Google Fonts -->
+    {# Opcional: si QUIERES forzar Inter en modo PDF standalone, descomenta esto
     <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=Inter:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
+    #}
 
     <style>
       /* ----------------------------------------
-         CONFIGURACIÓN GLOBAL / A4 / MÁRGENES
+         VARIABLES DE TEMA (sobrescribibles)
+         Puedes sobreescribir estas en la página host:
+         .doc-page {
+           --doc-color-text: #e5e7eb;
+           --doc-color-muted: #9ca3af;
+           ...
+         }
       ----------------------------------------- */
-      @page {
-        size: A4;
-        margin: 2.54cm; /* 1 pulgada por cada lado */
+      .doc-page {
+        --doc-font-family: inherit;
+        --doc-font-size: 13px;
+        --doc-line-height: 1.7;
+
+        --doc-color-bg: transparent;
+        --doc-color-text: #111827;
+        --doc-color-muted: #6b7280;
+        --doc-color-muted-soft: #9ca3af;
+
+        --doc-color-border: #e5e7eb;
+        --doc-color-border-soft: #d1d5db;
+
+        --doc-color-heading-main: #0f172a;
+        --doc-color-heading: #111827;
+        --doc-color-heading-sub: #374151;
+
+        --doc-color-accent: #1d4ed8;
+        --doc-color-accent-soft: #2563eb;
+
+        --doc-color-surface: #f9fafb;
+        --doc-color-table-header: #eff2f7;
+        --doc-color-summary-bg: #eff6ff;
       }
 
+      /* ----------------------------------------
+         CONFIGURACIÓN GLOBAL LIMITADA
+         (NO tocamos body, solo lo limpiamos un poco)
+      ----------------------------------------- */
       body {
-        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-          system-ui, sans-serif;
-        color: #111827;
-        font-size: 13px;
-        line-height: 1.7;
         margin: 0;
-        background: #ffffff;
+        background: transparent;
+      }
+
+      /* Si usas modo PDF puedes mantener esto (wkhtmltopdf/weasyprint lo respetan).
+         Si solo es vista web incrustada, puedes incluso quitar @page. */
+      @page {
+        size: A4;
+        margin: 2.54cm;
       }
 
-      .page {
-        /* contenedor principal del documento */
+      /* Contenedor principal del documento */
+      .doc-page {
+        font-family: var(--doc-font-family);
+        font-size: var(--doc-font-size);
+        line-height: var(--doc-line-height);
+        color: var(--doc-color-text);
+        background: var(--doc-color-bg);
       }
 
       /* ----------------------------------------
@@ -41,230 +79,227 @@
       .doc-header {
         margin-bottom: 16px;
         padding-bottom: 10px;
-        border-bottom: 1px solid #e5e7eb;
+        border-bottom: 1px solid var(--doc-color-border);
       }
 
       .doc-header-meta {
         font-size: 11px;
-        color: #6b7280;
+        color: var(--doc-color-muted);
         margin-top: 4px;
       }
 
       .doc-footer {
         margin-top: 32px;
         font-size: 11px;
-        color: #9ca3af;
+        color: var(--doc-color-muted-soft);
         text-align: right;
       }
 
       /* ----------------------------------------
-         TITULOS
+         TITULOS (scopeados al doc)
       ----------------------------------------- */
-      h1,
-      h2,
-      h3,
-      h4 {
-        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
-          system-ui, sans-serif;
+      .doc-page h1,
+      .doc-page h2,
+      .doc-page h3,
+      .doc-page h4 {
+        font-family: inherit; /* No forzamos fuente */
         margin-bottom: 6px;
         font-weight: 600;
       }
 
-      h1 {
+      .doc-page h1 {
         font-size: 22px;
-        color: #0f172a;
+        color: var(--doc-color-heading-main);
         letter-spacing: 0.03em;
         text-transform: uppercase;
         margin-top: 0;
       }
 
-      h2 {
+      .doc-page h2 {
         font-size: 16px;
-        color: #111827;
-        border-left: 3px solid #1d4ed8;
+        color: var(--doc-color-heading);
+        border-left: 3px solid var(--doc-color-accent);
         padding-left: 10px;
         margin-top: 24px;
         margin-bottom: 8px;
       }
 
-      h3 {
+      .doc-page h3 {
         font-size: 14px;
-        color: #111827;
+        color: var(--doc-color-heading);
         margin-top: 18px;
         margin-bottom: 4px;
       }
 
-      h4 {
+      .doc-page h4 {
         font-size: 13px;
-        color: #374151;
+        color: var(--doc-color-heading-sub);
         margin-top: 12px;
         margin-bottom: 4px;
       }
 
-      p {
+      .doc-page p {
         margin: 4px 0 10px;
       }
 
-      .muted {
-        color: #6b7280;
+      .doc-page .muted {
+        color: var(--doc-color-muted);
         font-size: 11px;
       }
 
-      .section {
+      .doc-page .section {
         margin-top: 16px;
       }
 
       /* ----------------------------------------
          TARJETAS
       ----------------------------------------- */
-      .card-grid {
+      .doc-page .card-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
         gap: 10px;
         margin: 14px 0;
       }
 
-      .card {
-        border: 1px solid #e5e7eb;
+      .doc-page .card {
+        border: 1px solid var(--doc-color-border);
         border-radius: 6px;
         padding: 12px 14px;
-        background: #f9fafb;
+        background: var(--doc-color-surface);
       }
 
-      .card-title {
+      .doc-page .card-title {
         font-size: 12px;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.04em;
-        color: #4b5563;
+        color: var(--doc-color-heading-sub);
         margin-bottom: 6px;
       }
 
       /* ----------------------------------------
-         TABLAS (pensadas para PDF)
+         TABLAS
       ----------------------------------------- */
-      table {
+      .doc-page table {
         width: 100%;
         border-collapse: collapse;
         margin: 12px 0 16px;
         font-size: 12px;
       }
 
-      thead {
-        display: table-header-group; /* Repite encabezados en cada página */
+      .doc-page thead {
+        display: table-header-group;
       }
 
-      tfoot {
+      .doc-page tfoot {
         display: table-footer-group;
       }
 
-      tr {
-        page-break-inside: avoid; /* Evita cortar filas a la mitad */
+      .doc-page tr {
+        page-break-inside: avoid;
       }
 
-      th,
-      td {
-        border: 1px solid #e5e7eb;
+      .doc-page th,
+      .doc-page td {
+        border: 1px solid var(--doc-color-border);
         padding: 6px 8px;
         vertical-align: top;
       }
 
-      th {
-        background: #eff2f7;
+      .doc-page th {
+        background: var(--doc-color-table-header);
         font-weight: 600;
         text-transform: uppercase;
         font-size: 10px;
         letter-spacing: 0.06em;
-        color: #4b5563;
+        color: var(--doc-color-heading-sub);
       }
 
-      tr:nth-child(even) td {
-        background: #f9fafb;
+      .doc-page tr:nth-child(even) td {
+        background: var(--doc-color-surface);
       }
 
       /* ----------------------------------------
          LISTAS
       ----------------------------------------- */
-      ul {
+      .doc-page ul {
         padding-left: 20px;
         margin: 6px 0 8px;
       }
 
-      ul li {
+      .doc-page ul li {
         margin-bottom: 3px;
       }
 
       /* ----------------------------------------
          PILLS
       ----------------------------------------- */
-      .pill {
+      .doc-page .pill {
         display: inline-block;
         padding: 3px 8px;
         border-radius: 999px;
-        background: #e5e7eb;
+        background: var(--doc-color-border);
         font-size: 10px;
         margin-right: 4px;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        color: #374151;
+        color: var(--doc-color-heading-sub);
       }
 
       /* ----------------------------------------
          SUMMARY BOX
       ----------------------------------------- */
-      .summary-box {
-        border-left: 3px solid #2563eb;
-        background: #eff6ff;
+      .doc-page .summary-box {
+        border-left: 3px solid var(--doc-color-accent-soft);
+        background: var(--doc-color-summary-bg);
         padding: 10px 12px;
         border-radius: 4px;
         font-size: 12px;
         margin: 10px 0 14px;
       }
 
-      .summary-title {
+      .doc-page .summary-title {
         font-size: 11px;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        color: #1d4ed8;
+        color: var(--doc-color-accent-soft);
         margin-bottom: 4px;
       }
 
       /* ----------------------------------------
          UTILIDADES
       ----------------------------------------- */
-      .flex {
+      .doc-page .flex {
         display: flex;
       }
 
-      .justify-between {
+      .doc-page .justify-between {
         justify-content: space-between;
       }
 
-      .items-center {
+      .doc-page .items-center {
         align-items: center;
       }
 
-      .text-right {
+      .doc-page .text-right {
         text-align: right;
       }
 
-      .badge {
+      .doc-page .badge {
         display: inline-block;
         padding: 2px 8px;
         border-radius: 999px;
         font-size: 10px;
-        border: 1px solid #d1d5db;
-        color: #4b5563;
-        background: #f9fafb;
+        border: 1px solid var(--doc-color-border-soft);
+        color: var(--doc-color-heading-sub);
+        background: var(--doc-color-surface);
       }
     </style>
   </head>
-
   <body>
-    <div class="page">
+    <div class="doc-page">
       {% block content %}{% endblock %}
-
       <p class="doc-footer">
         Generado automáticamente {{ generated_at }}
       </p>