{t("h1")}{t("h1b")}

{t("hero_p")}

{t("privacy_chip")}

{t("trip")}

{t("traveler")}

{t("employeeId")}

{t("company")}

{t("destination")}

{t("purpose")}

{t("dateFrom")}

{t("dateTo")}

{t("currency")}

{t("advance")} {t("advance_hint")}

{t("notes")}

</div>
            </div>

<div className="exp-head">
              <h2>{t("expenses")}</h2>
              <button className="btn-mini" onClick={addExpense}>+ {t("add_expense")}</button>
            </div>

{report.expenses.length === 0 && <div className="empty">{t("empty")}</div>}

{report.expenses.map((e, i) => (
              <ExpenseRow key={e.id} expense={e} index={i} reportCurrency={report.trip.currency}
                t={t} onChange={updateExpense} onDelete={deleteExpense}
                onAttach={attachReceipt} onDetach={detachReceipt} onSuggestFx={suggestFx} />
            ))}

{report.expenses.length > 0 && (
              <button className="btn" onClick={addExpense}>+ {t("add_expense")}</button>
            )}

<div className="disclaimer" dangerouslySetInnerHTML={{ __html: t("disclaimer") }} />
            <div className="cta">
              <h3>{t("cta_h3")}</h3><p>{t("cta_p")}</p>
              <a className="btn btn-primary" href="/contacto">{t("cta_btn")}</a>
            </div>
            <div style={{ marginTop: 8 }}>
              <h2 className="section-title">{t("faq_title")}</h2>
              {t("faq").map(([q, a], i) => <details key={i}><summary>{q}</summary><p>{a}</p></details>)}
            </div>
          </div>

{/* La carátula del reporte: lo que se ve aquí es lo que se descarga. */}
          <div className="col-side">
            <div className="doc">
              <div className="doc-head">
                <div className="doc-kicker">{t("doc_kicker")}</div>
                <div className="doc-title">{report.trip.destination || t("doc_untitled")}</div>
                <div className="doc-meta mono">{period}</div>
                <div className="doc-meta">{report.trip.traveler || t("doc_noname")}</div>
              </div>

<div className="doc-figs">
                <div className="fig"><span>{t("f_total")}</span><span className="v">{money(totals.totalCents)}</span></div>
                <div className="fig"><span>{t("f_tax")}</span><span className="v">{money(totals.taxCents)}</span></div>
                <div className="fig"><span>{t("f_advance")}</span><span className="v">−{money(totals.advanceCents)}</span></div>
              </div>

<div className={"balance " + kind}>
                <div className="lbl">{kind === "refund" ? t("bal_refund") : kind === "return" ? t("bal_return") : t("bal_settled")}</div>
                <div className="amt">{money(Math.abs(totals.balanceCents))} <span style={{ fontSize: "0.5em", fontWeight: 600 }}>{report.trip.currency}</span></div>
              </div>

{message && <div className={"note" + (message.kind === "plain" ? " plain" : "")}>{message.text}</div>}

<div className="doc-actions">
                <button className="btn btn-primary" onClick={downloadPdf} disabled={busy}>
                  <Icon name="download" />{busy ? t("download_busy") : t("download")}
                </button>
                <div className="btn-row">
                  <button className="btn" onClick={downloadCsv}>{t("csv")}</button>
                  <button className="btn" onClick={saveJson}>{t("json_export")}</button>
                </div>
                <div className="btn-row">
                  <button className="btn" onClick={() => importRef.current.click()}>{t("json_import")}</button>
                  <button className="btn" onClick={resetReport}>{t("reset")}</button>
                </div>
                <input ref={importRef} type="file" accept="application/json,.json" style={{ display: "none" }}
                  onChange={(ev) => { const f = ev.target.files[0]; ev.target.value = ""; if (f) openJson(f) }} />
              </div>
            </div>
          </div>
        </div>

<footer className="foot">
          <span>{t("foot_free")}</span>
          <span className="foot-credit">{t("foot_crafted")} <span className="foot-heart" aria-label="love">♥</span> {t("foot_by")} <a className="foot-link" href="https://acaciaco.com.mx" target="_blank" rel="noopener noreferrer">ACACIA Consultoría</a></span>
          <span><a href="/freeware">{t("foot_tools")}</a> · <a href="/legal/privacidad">{t("foot_privacy")}</a> · <a href="/contacto">{t("foot_contact")}</a></span>
        </footer>
      </div>
    </div>
  )
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />)