expenses_manager/expenses/static/expenses/css/base.css

@@ -1108,3 +1108,36 @@ tr:hover {
         height: 260px;
     }
 }
+
+.info-panel {
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    background: var(--color-surface-alt);
+}
+
+.info-panel summary {
+    padding: 0.75rem 1rem;
+    cursor: pointer;
+    font-weight: 500;
+}
+
+.info-panel-content {
+    padding: 0 1rem 1rem;
+}
+
+.info-panel-content h2 {
+    margin: 1rem 0 0.25rem;
+    font-size: 1rem;
+}
+
+.info-panel-content p,
+.info-panel-content ul {
+    margin: 0.25rem 0;
+    font-size: 0.9rem;
+    color: var(--color-text-muted);
+}
+
+.info-panel-content ul {
+    padding-left: 1.2rem;
+}

expenses_manager/expenses/templates/goals/form.html

@@ -8,6 +8,64 @@
         {{ title }}
     </h1>
 
+    <details class="info-panel">
+        <summary>¿Qué tipo de objetivo necesito?</summary>
+
+        <div class="info-panel-content">
+            <h2>Pago / deuda</h2>
+            <p>
+                Para algo que quieres terminar de pagar: devolver un préstamo,
+                costear un viaje a plazos, reunir el importe de una compra grande.
+                El progreso es la suma de los gastos de la categoría elegida desde
+                la fecha de inicio, y llegar al 100% es haberlo conseguido.
+            </p>
+
+            <h2>Presupuesto</h2>
+            <p>
+                Para ponerte un límite de gasto que no quieres superar. El progreso
+                se reinicia cada mes o cada año, según el periodo que elijas.
+                Aquí acercarse al 100% es un aviso, no un logro: la barra pasa a
+                naranja al llegar al 80% y a rojo si te pasas del límite.
+            </p>
+
+            <h2>Ahorro</h2>
+            <p>
+                Para acumular dinero hasta una cantidad. Se mide con el saldo de la
+                cuenta que asocies, así que necesita una cuenta en vez de una
+                categoría.
+            </p>
+
+            <h2>Los demás campos</h2>
+            <ul>
+                <li>
+                    <strong>Category</strong> — solo para pago y presupuesto: es la
+                    categoría cuyos gastos se cuentan.
+                </li>
+                <li>
+                    <strong>Include subcategories</strong> — si se marca, también
+                    cuentan los gastos de las categorías hijas.
+                </li>
+                <li>
+                    <strong>Account</strong> — solo para ahorro: la cuenta cuyo saldo
+                    mide el progreso.
+                </li>
+                <li>
+                    <strong>Start date</strong> — desde cuándo se cuentan los gastos
+                    en un pago. En un presupuesto no se usa: manda el reinicio del
+                    periodo.
+                </li>
+                <li>
+                    <strong>Period</strong> — solo para presupuesto: cada cuánto
+                    vuelve el progreso a cero.
+                </li>
+                <li>
+                    <strong>Show on home</strong> — si el objetivo aparece en la
+                    pantalla de inicio.
+                </li>
+            </ul>
+        </div>
+    </details>
+
     <form method="post" class="app-form">
         {% csrf_token %}
         {% include "expenses/_form_fields.html" %}