---
name: faranda-report
description: Generate HTML reports and documents using the official Faranda Hotels visual identity. Applies brand colors (navy/gold), Montaga+Montserrat typography, metric cards, tables, badges, architecture diagrams, timelines, and cover pages. Use when creating executive reports, dashboards, BI outputs, or any Faranda-branded HTML document.
allowed-tools: Read Write Edit Bash Glob Grep
argument-hint: "[report title or description]"
---

# Faranda Report Generator

Generate professional HTML reports using the Faranda Hotels & Resorts brand identity.

## Style System

Read the full style reference: [style-reference.md](style-reference.md)
CSS file location: `/Users/sguevara/appsFabric/fos_network/docs/references/faranda-base.css`

## Instructions

1. **Always start with this HTML template:**

```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[TITULO] | Faranda Hotels</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Montaga&display=swap" rel="stylesheet">
<link rel="stylesheet" href="faranda-base.css">
<!-- Or inline the CSS from /Users/sguevara/appsFabric/fos_network/docs/references/faranda-base.css if standalone -->
</head>
<body>
<!-- content -->
</body>
</html>
```

2. **Cover page is REQUIRED.** Structure:
   - `.cover-logo` — "Faranda Hotels & Resorts"
   - `.cover-subtitle` — department or division
   - `.cover-divider`
   - `h1` — report title
   - `.tagline` — one-line description
   - `.cover-divider`
   - `.cover-meta` — date, confidentiality, version

3. **Sections follow this pattern:**
```html
<div class="container">
  <div class="section">
    <div class="section-number">01</div>
    <div class="section-title">Section Title</div>
    <div class="section-divider"></div>
    <!-- content: metric-grid, tables, highlights, etc. -->
  </div>
</div>
```

4. **Use components from the style system:**
   - `.metric-grid` + `.metric-card` for KPIs (add `.gold`, `.navy`, `.success`, `.danger` for border color)
   - `table` with `th`/`td` for structured data
   - `.badge` (`.badge-done`, `.badge-progress`, `.badge-gap`, `.badge-advantage`)
   - `.highlight` + `.highlight-title` for callout boxes
   - `.arch-diagram` for architecture/flow diagrams
   - `.compare-row` + `.bar-us` / `.bar-them` for comparison charts
   - `.timeline` for roadmaps
   - `.roi-card` for prominent KPI callouts
   - `.gap-item` for issues/opportunities lists
   - `.footer` for document footer

5. **Brand rules (mandatory):**
   - Navy dominates, Gold accents — never reverse
   - All KPI numbers use Montaga serif
   - All body text uses Montserrat sans-serif
   - No shadows — flat design with subtle borders
   - No colors outside the defined palette
   - No fonts other than Montaga and Montserrat
   - Cream for card backgrounds, never plain gray
   - Always include `@media print` with `.page-break` markers between major sections
   - All text in Spanish unless explicitly requested otherwise

6. **For standalone HTML files** (no external CSS dependency):
   - Read `/Users/sguevara/appsFabric/fos_network/docs/references/faranda-base.css`
   - Inline the entire CSS inside a `<style>` tag in the HTML `<head>`
   - This makes the file self-contained and shareable

7. **Footer format:**
```html
<div class="footer">
  Faranda Hotels & Resorts &bull; [Departamento] &bull; [Mes Ano] &bull; Confidencial
</div>
```

## Task

Generate or convert the following into a Faranda-branded HTML report:

$ARGUMENTS

Read the CSS file and style reference before generating. Produce a complete, self-contained HTML file ready to open in a browser or share as PDF.