Jcbertorello · December 28, 2025 17:00
diff --git a/dashboard.html b/dashboard.html
 ```html
 <!DOCTYPE html>
 <html lang="es">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resumen de ventas y espectadores julio 2025 - Cinexo</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    :root {
      --color-primary: #60B99A;
      --color-primary-light: #7FCDB2;
      --color-primary-dark: #4A9D80;
      --color-secondary: #1F3B4D;
      --color-secondary-light: #2D5066;
      --color-dark: #1e293b;
      --color-dark-soft: #334155;
      --color-muted: #64748b;
      --color-light: #94a3b8;
      --color-bg: #f8fafc;
      --color-bg-alt: #f1f5f9;
      --color-card: #ffffff;
      --color-border: #e2e8f0;
      --color-success: #16a34a;
      --color-success-bg: #dcfce7;
      --color-danger: #dc2626;
      --color-danger-bg: #fee2e2;
      --color-warning: #FFB74D;
      --color-warning-bg: #fff7ed;
      --color-boleteria: #60B99A;
      --color-candy: #FFB74D;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background-color: var(--color-bg);
      color: var(--color-dark);
      line-height: 1.6;
      min-height: 100vh;
    }

    .dashboard {
      max-width: 1200px;
      margin: 0 auto;
      padding: 32px 24px;
    }

    .action-buttons {
      display: flex;
      gap: 12px;
      margin-bottom: 24px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 0.95rem;
      cursor: pointer;
      border: none;
      transition: all 0.2s ease;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
      color: white;
      box-shadow: 0 4px 12px -2px rgba(96, 185, 154, 0.4);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px -2px rgba(96, 185, 154, 0.5);
    }

    .btn-secondary {
      background-color: var(--color-card);
      color: var(--color-dark);
      border: 1px solid var(--color-border);
    }

    .btn-secondary:hover {
      background-color: var(--color-bg-alt);
      border-color: var(--color-primary);
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 32px;
      flex-wrap: wrap;
      gap: 20px;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .logo {
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 1.5rem;
      font-weight: 800;
      box-shadow: 0 8px 20px -4px rgba(96, 185, 154, 0.4);
    }

    .header-title {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--color-dark);
      margin-bottom: 4px;
    }

    .header-subtitle {
      font-size: 0.95rem;
      color: var(--color-muted);
    }

    .header-date {
      font-size: 0.85rem;
      color: var(--color-light);
      text-align: right;
    }

    .info-bar {
      background: var(--color-card);
      border: 1px solid var(--color-border);
      border-left: 4px solid var(--color-primary);
      border-radius: 12px;
      padding: 16px 20px;
      margin-bottom: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .info-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.875rem;
      color: var(--color-muted);
    }

    .info-item strong { color: var(--color-dark); }
    
    .card {
      background-color: var(--color-card);
      border: 1px solid var(--color-border);
      border-radius: 20px;
      padding: 24px;
      margin-bottom: 24px;
      box-shadow: 0 4px 20px -4px rgba(30, 41, 59, 0.08);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      break-inside: avoid;
      page-break-inside: avoid;
    }

    .card:hover {
      box-shadow: 0 8px 30px -4px rgba(30, 41, 59, 0.12);
      transform: translateY(-2px);
    }

    .card-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--color-dark);
      margin-bottom: 4px;
    }

    .card-subtitle {
      font-size: 0.85rem;
      color: var(--color-muted);
      margin-bottom: 20px;
    }

    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
      margin-bottom: 32px;
    }

    .kpi-card {
      background-color: var(--color-card);
      border: 1px solid var(--color-border);
      border-radius: 20px;
      padding: 24px;
      text-align: center;
      box-shadow: 0 4px 20px -4px rgba(30, 41, 59, 0.08);
      transition: all 0.3s ease;
      break-inside: avoid;
      page-break-inside: avoid;
      position: relative;
      overflow: hidden;
    }

    .kpi-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    }

    .kpi-card.candy::before {
      background: linear-gradient(90deg, var(--color-candy), #FFA726);
    }

    .kpi-card.total::before {
      background: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-light));
    }

    .kpi-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px -4px rgba(30, 41, 59, 0.15);
    }

    .kpi-icon { font-size: 2rem; margin-bottom: 12px; }

    .kpi-label {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--color-muted);
      margin-bottom: 12px;
    }

    .kpi-value {
      font-size: 2rem;
      font-weight: 800;
      color: var(--color-dark);
      line-height: 1.1;
      margin-bottom: 8px;
    }

    .kpi-detail {
      font-size: 0.85rem;
      color: var(--color-muted);
    }

    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-bottom: 24px;
    }

    .chart-container {
      height: 350px;
      position: relative;
    }

    .table-wrapper { overflow-x: auto; }

    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
    }

    .data-table thead { background-color: var(--color-bg-alt); }

    .data-table th {
      padding: 14px 16px;
      text-align: left;
      font-weight: 700;
      color: var(--color-muted);
      text-transform: uppercase;
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      border-bottom: 2px solid var(--color-border);
    }

    .data-table th.text-right { text-align: right; }

    .data-table td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--color-border);
      color: var(--color-dark);
      vertical-align: middle;
    }

    .data-table td.text-right { text-align: right; }
    .data-table td.font-bold { font-weight: 700; }
    .data-table tr:hover { background-color: var(--color-bg); }
    .data-table tr:last-child td { border-bottom: none; }

    .rank-badge {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 0.85rem;
    }

    .rank-1 { background: linear-gradient(135deg, #FFD700, #FFA500); color: white; }
    .rank-2 { background: linear-gradient(135deg, #C0C0C0, #A0A0A0); color: white; }
    .rank-3 { background: linear-gradient(135deg, #CD7F32, #B8860B); color: white; }
    .rank-default { background-color: var(--color-bg-alt); color: var(--color-muted); }

    .badge-container { display: flex; gap: 4px; flex-wrap: wrap; }
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
    }

    .badge-2d { background: #e0f2fe; color: #0369a1; }
    .badge-3d { background: #fef3c7; color: #b45309; }
    .badge-imax { background: #fce7f3; color: #be185d; }
    .badge-4dx { background: #f3e8ff; color: #7c3aed; }
    .badge-combo { background: var(--color-warning-bg); color: #b45309; }
    .badge-producto { background: var(--color-success-bg); color: var(--color-success); }
    
    .footer {
      text-align: center;
      padding: 32px 24px;
      margin-top: 32px;
      border-top: 1px solid var(--color-border);
    }

    .footer-content {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--color-light);
      font-size: 0.9rem;
    }

    .footer-logo {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 0.9rem;
      font-weight: 800;
    }

    .footer-text { text-align: left; }
    .footer-text small { display: block; font-size: 0.75rem; color: var(--color-light); }
    
    @media (max-width: 900px) {
      .grid-2, .grid-3 { grid-template-columns: 1fr; }
      .kpi-grid { grid-template-columns: repeat(2, 1fr); }
      .header { flex-direction: column; }
      .header-date { text-align: left; }
    }

    @media (max-width: 500px) {
      .kpi-grid { grid-template-columns: 1fr; }
      .dashboard { padding: 20px 16px; }
      .info-bar { flex-direction: column; align-items: flex-start; }
    }

    @media print {
      body {
        background-color: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
      }
      .action-buttons { display: none !important; }
      .card, .kpi-card {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        box-shadow: none !important;
        border: 1px solid #e0e0e0 !important;
      }
      .card:hover, .kpi-card:hover { transform: none !important; }
      .dashboard { padding: 16px !important; max-width: 100% !important; }
      .kpi-card::before { background: var(--color-primary) !important; }
      .kpi-card.candy::before { background: var(--color-candy) !important; }
      .logo, .footer-logo { background: var(--color-primary) !important; }
    }
  </style>
 </head>
 <body>
  <div class="dashboard">
    
    <div class="action-buttons">
      <button class="btn btn-primary" onclick="downloadPDF()">📥 Descargar PDF</button>
      <button class="btn btn-secondary" onclick="window.print()">🖨️ Imprimir</button>
    </div>
    
    <div class="header">
      <div class="header-left">
        <div class="logo">C</div>
        <div>
          <h1 class="header-title">Resumen de ventas y espectadores julio 2025</h1>
          <p class="header-subtitle">Cinexo • Julio 2025</p>
        </div>
      </div>
      <div class="header-date" id="generation-date"></div>
    </div>
    
    <div class="info-bar">
      <div class="info-item">📅 <strong>Período:</strong> 01/07/2025 al 31/07/2025</div>
      <div class="info-item">📊 <strong>Tipo:</strong> Resumen de Ventas</div>
    </div>
    
    <div class="kpi-grid">
      <div class="kpi-card">
        <div class="kpi-icon">🎬</div>
        <div class="kpi-label">Espectadores</div>
        <div class="kpi-value">33.303</div>
        <div class="kpi-detail">Julio 2025</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-icon">🎫</div>
        <div class="kpi-label">Recaudación Boletería</div>
        <div class="kpi-value">$91.3M</div>
        <div class="kpi-detail">Ticket promedio: $2.741</div>
      </div>
      <div class="kpi-card candy">
        <div class="kpi-icon">🍿</div>
        <div class="kpi-label">Venta Candy</div>
        <div class="kpi-value">$207.6M</div>
        <div class="kpi-detail">CPP: $6.234</div>
      </div>
      <div class="kpi-card total">
        <div class="kpi-icon">💰</div>
        <div class="kpi-label">Ingresos Totales</div>
        <div class="kpi-value">$298.9M</div>
        <div class="kpi-detail">Boletería + Candy</div>
      </div>
    </div>
    
    <div class="grid-2">
      <div class="card">
        <div class="card-title">🏆 Top 5 Películas por Recaudación</div>
        <div class="card-subtitle">Ingresos generados por las películas más vistas</div>
        <div class="chart-container">
          <canvas id="chartPeliculas"></canvas>
        </div>
      </div>
      <div class="card">
        <div class="card-title">🍭 Top 5 Productos de Candy por Cantidad</div>
        <div class="card-subtitle">Unidades vendidas de los productos más populares</div>
        <div class="chart-container">
          <canvas id="chartProductosCandy"></canvas>
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">🎬 Ranking de Películas</div>
      <div class="card-subtitle">Top 5 por espectadores e ingresos en Julio 2025</div>
      <div class="table-wrapper">
        <table class="data-table">
          <thead>
            <tr>
              <th>#</th>
              <th>Película</th>
              <th>Formato</th>
              <th class="text-right">Espectadores</th>
              <th class="text-right">Recaudación</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><span class="rank-badge rank-1">1</span></td>
              <td class="font-bold">F1 2D+4D</td>
              <td><div class="badge-container"><span class="badge badge-2d">2D</span><span class="badge badge-4dx">4D</span></div></td>
              <td class="text-right">5.374</td>
              <td class="text-right font-bold">$28.864.000</td>
            </tr>
            <tr>
              <td><span class="rank-badge rank-2">2</span></td>
              <td class="font-bold">Jurassic World: Renace 3D+4D</td>
              <td><div class="badge-container"><span class="badge badge-3d">3D</span><span class="badge badge-4dx">4D</span></div></td>
              <td class="text-right">3.930</td>
              <td class="text-right font-bold">$22.260.000</td>
            </tr>
            <tr>
              <td><span class="rank-badge rank-3">3</span></td>
              <td class="font-bold">Jurassic World: Renace 2D+4D</td>
              <td><div class="badge-container"><span class="badge badge-2d">2D</span><span class="badge badge-4dx">4D</span></div></td>
              <td class="text-right">3.087</td>
              <td class="text-right font-bold">$16.417.000</td>
            </tr>
            <tr>
              <td><span class="rank-badge rank-default">4</span></td>
              <td class="font-bold">Cómo entrenar a tu dragón 3D+4D</td>
              <td><div class="badge-container"><span class="badge badge-3d">3D</span><span class="badge badge-4dx">4D</span></div></td>
              <td class="text-right">2.728</td>
              <td class="text-right font-bold">$15.604.250</td>
            </tr>
            <tr>
              <td><span class="rank-badge rank-default">5</span></td>
              <td class="font-bold">Lilo y Stitch 3D</td>
              <td><div class="badge-container"><span class="badge badge-3d">3D</span></div></td>
              <td class="text-right">1.596</td>
              <td class="text-right font-bold">$8.152.750</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="card">
        <div class="card-title">🍿 Productos Más Vendidos</div>
        <div class="card-subtitle">Confitería - Top 5 por cantidad en Julio 2025</div>
        <div class="table-wrapper">
          <table class="data-table">
            <thead>
              <tr>
                <th>#</th>
                <th>Producto</th>
                <th>Tipo</th>
                <th class="text-right">Cantidad</th>
                <th class="text-right">Total</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><span class="rank-badge rank-1">1</span></td>
                <td class="font-bold">COMBO PAREJA</td>
                <td><span class="badge badge-combo">Combo</span></td>
                <td class="text-right">3.903</td>
                <td class="text-right font-bold">$53.998.000</td>
              </tr>
              <tr>
                <td><span class="rank-badge rank-2">2</span></td>
                <td class="font-bold">COMBO MEDIANO</td>
                <td><span class="badge badge-combo">Combo</span></td>
                <td class="text-right">2.823</td>
                <td class="text-right font-bold">$26.818.500</td>
              </tr>
              <tr>
                <td><span class="rank-badge rank-3">3</span></td>
                <td class="font-bold">COMBO FAMILIA</td>
                <td><span class="badge badge-combo">Combo</span></td>
                <td class="text-right">2.459</td>
                <td class="text-right font-bold">$33.352.500</td>
              </tr>
              <tr>
                <td><span class="rank-badge rank-default">4</span></td>
                <td class="font-bold">AGUA</td>
                <td><span class="badge badge-producto">Producto</span></td>
                <td class="text-right">1.893</td>
                <td class="text-right font-bold">$6.625.500</td>
              </tr>
              <tr>
                <td><span class="rank-badge rank-default">5</span></td>
                <td class="font-bold">COMBO BALDE</td>
                <td><span class="badge badge-combo">Combo</span></td>
                <td class="text-right">1.667</td>
                <td class="text-right font-bold">$21.671.000</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    
    <div class="footer">
      <div class="footer-content">
        <div class="footer-logo">M</div>
        <div class="footer-text">
          <strong>Powered by MostachIA</strong>
          <small>Procesos inteligentes, resultados superiores</small>
        </div>
        <span>•</span>
        <span id="footer-date"></span>
      </div>
    </div>
    
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
        Chart.defaults.font.family = "'Segoe UI', system-ui, sans-serif";
        Chart.defaults.font.size = 12;
        Chart.defaults.color = '#64748b';
        Chart.defaults.plugins.legend.labels.usePointStyle = true;
        Chart.defaults.plugins.legend.labels.padding = 20;
        Chart.defaults.plugins.legend.position = 'bottom';
        
        const chartColors = {
            primary: '#60B99A',
            candy: '#FFB74D',
            palette: ['#60B99A', '#1F3B4D', '#7FCDB2', '#2D5066', '#4A9D80', '#FFB74D', '#5A7A8A', '#A8D5C2']
        };
        
        function formatCurrency(value) {
            if (value >= 1000000) return '$' + (value / 1000000).toFixed(1).replace('.',',') + 'M';
            if (value >= 1000) return '$' + (value / 1000).toFixed(0) + 'K';
            return '$' + value.toLocaleString('es-AR', { maximumFractionDigits: 0 });
        }
        
        const today = new Date();
        const formattedDate = `Generado: ${today.toLocaleDateString('es-AR')} ${today.toLocaleTimeString('es-AR', {hour: '2-digit', minute:'2-digit'})}`;
        document.getElementById('generation-date').textContent = formattedDate;
        document.getElementById('footer-date').textContent = today.toLocaleDateString('es-AR');

        new Chart(document.getElementById('chartPeliculas'), {
            type: 'bar',
            data: {
                labels: ['F1', 'Jurassic World 3D', 'Jurassic World 2D', 'Cómo entrenar...', 'Lilo y Stitch'],
                datasets: [{
                    label: 'Recaudación',
                    data: [28864000, 22260000, 16417000, 15604250, 8152750],
                    backgroundColor: chartColors.palette,
                    borderRadius: 8,
                    borderSkipped: false,
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: { callbacks: { label: ctx => formatCurrency(ctx.raw) } }
                },
                scales: {
                    x: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { callback: value => formatCurrency(value) } },
                    y: { grid: { display: false } }
                }
            }
        });

        new Chart(document.getElementById('chartProductosCandy'), {
            type: 'bar',
            data: {
                labels: ['Combo Pareja', 'Combo Mediano', 'Combo Familia', 'Agua', 'Combo Balde'],
                datasets: [{
                    label: 'Unidades Vendidas',
                    data: [3903, 2823, 2459, 1893, 1667],
                    backgroundColor: chartColors.candy,
                    borderRadius: 8,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    y: { beginAtZero: true, grid: { color: '#f1f5f9' } },
                    x: { grid: { display: false } }
                }
            }
        });
    });

    function downloadPDF() {
      const buttons = document.querySelector('.action-buttons');
      buttons.style.display = 'none';
      
      const element = document.querySelector('.dashboard');
      const title = document.querySelector('.header-title')?.textContent || 'Dashboard';
      const date = new Date().toISOString().split('T')[0];
      const filename = 'cinexo-' + title.toLowerCase()
        .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/-+/g, '-')
        .replace(/^-|-$/g, '') + '-' + date + '.pdf';
      
      const opt = {
        margin: [8, 8, 8, 8],
        filename: filename,
        image: { type: 'jpeg', quality: 0.95 },
        html2canvas: { 
          scale: 2, useCORS: true, logging: false,
          backgroundColor: '#ffffff', windowWidth: 1200
        },
        jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
        pagebreak: { mode: ['avoid-all', 'css', 'legacy'], avoid: '.card, .kpi-card' }
      };
      
      html2pdf().set(opt).from(element).save().then(() => {
        buttons.style.display = 'flex';
      }).catch(() => {
        buttons.style.display = 'flex';
        alert('Error al generar PDF. Intentá con Imprimir.');
      });
    }
  </script>
 </body>
 </html>
 ```
	```html
	<!DOCTYPE html>
	<html lang="es">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Resumen de ventas y espectadores julio 2025 - Cinexo</title>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<style>
	:root {
	--color-primary: #60B99A;
	--color-primary-light: #7FCDB2;
	--color-primary-dark: #4A9D80;
	--color-secondary: #1F3B4D;
	--color-secondary-light: #2D5066;
	--color-dark: #1e293b;
	--color-dark-soft: #334155;
	--color-muted: #64748b;
	--color-light: #94a3b8;
	--color-bg: #f8fafc;
	--color-bg-alt: #f1f5f9;
	--color-card: #ffffff;
	--color-border: #e2e8f0;
	--color-success: #16a34a;
	--color-success-bg: #dcfce7;
	--color-danger: #dc2626;
	--color-danger-bg: #fee2e2;
	--color-warning: #FFB74D;
	--color-warning-bg: #fff7ed;
	--color-boleteria: #60B99A;
	--color-candy: #FFB74D;
	}

	* { margin: 0; padding: 0; box-sizing: border-box; }

	body {
	font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
	background-color: var(--color-bg);
	color: var(--color-dark);
	line-height: 1.6;
	min-height: 100vh;
	}

	.dashboard {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px;
	}

	.action-buttons {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
	}

	.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 12px;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	border: none;
	transition: all 0.2s ease;
	}

	.btn-primary {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: white;
	box-shadow: 0 4px 12px -2px rgba(96, 185, 154, 0.4);
	}

	.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -2px rgba(96, 185, 154, 0.5);
	}

	.btn-secondary {
	background-color: var(--color-card);
	color: var(--color-dark);
	border: 1px solid var(--color-border);
	}

	.btn-secondary:hover {
	background-color: var(--color-bg-alt);
	border-color: var(--color-primary);
	}

	.header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 32px;
	flex-wrap: wrap;
	gap: 20px;
	}

	.header-left {
	display: flex;
	align-items: center;
	gap: 16px;
	}

	.logo {
	width: 56px;
	height: 56px;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.5rem;
	font-weight: 800;
	box-shadow: 0 8px 20px -4px rgba(96, 185, 154, 0.4);
	}

	.header-title {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--color-dark);
	margin-bottom: 4px;
	}

	.header-subtitle {
	font-size: 0.95rem;
	color: var(--color-muted);
	}

	.header-date {
	font-size: 0.85rem;
	color: var(--color-light);
	text-align: right;
	}

	.info-bar {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-primary);
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	}

	.info-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--color-muted);
	}

	.info-item strong { color: var(--color-dark); }

	.card {
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 20px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 4px 20px -4px rgba(30, 41, 59, 0.08);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	break-inside: avoid;
	page-break-inside: avoid;
	}

	.card:hover {
	box-shadow: 0 8px 30px -4px rgba(30, 41, 59, 0.12);
	transform: translateY(-2px);
	}

	.card-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-dark);
	margin-bottom: 4px;
	}

	.card-subtitle {
	font-size: 0.85rem;
	color: var(--color-muted);
	margin-bottom: 20px;
	}

	.kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px;
	margin-bottom: 32px;
	}

	.kpi-card {
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 20px;
	padding: 24px;
	text-align: center;
	box-shadow: 0 4px 20px -4px rgba(30, 41, 59, 0.08);
	transition: all 0.3s ease;
	break-inside: avoid;
	page-break-inside: avoid;
	position: relative;
	overflow: hidden;
	}

	.kpi-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
	}

	.kpi-card.candy::before {
	background: linear-gradient(90deg, var(--color-candy), #FFA726);
	}

	.kpi-card.total::before {
	background: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-light));
	}

	.kpi-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px -4px rgba(30, 41, 59, 0.15);
	}

	.kpi-icon { font-size: 2rem; margin-bottom: 12px; }

	.kpi-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-muted);
	margin-bottom: 12px;
	}

	.kpi-value {
	font-size: 2rem;
	font-weight: 800;
	color: var(--color-dark);
	line-height: 1.1;
	margin-bottom: 8px;
	}

	.kpi-detail {
	font-size: 0.85rem;
	color: var(--color-muted);
	}

	.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-bottom: 24px;
	}

	.chart-container {
	height: 350px;
	position: relative;
	}

	.table-wrapper { overflow-x: auto; }

	.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	}

	.data-table thead { background-color: var(--color-bg-alt); }

	.data-table th {
	padding: 14px 16px;
	text-align: left;
	font-weight: 700;
	color: var(--color-muted);
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	border-bottom: 2px solid var(--color-border);
	}

	.data-table th.text-right { text-align: right; }

	.data-table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-dark);
	vertical-align: middle;
	}

	.data-table td.text-right { text-align: right; }
	.data-table td.font-bold { font-weight: 700; }
	.data-table tr:hover { background-color: var(--color-bg); }
	.data-table tr:last-child td { border-bottom: none; }

	.rank-badge {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.85rem;
	}

	.rank-1 { background: linear-gradient(135deg, #FFD700, #FFA500); color: white; }
	.rank-2 { background: linear-gradient(135deg, #C0C0C0, #A0A0A0); color: white; }
	.rank-3 { background: linear-gradient(135deg, #CD7F32, #B8860B); color: white; }
	.rank-default { background-color: var(--color-bg-alt); color: var(--color-muted); }

	.badge-container { display: flex; gap: 4px; flex-wrap: wrap; }
	.badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	}

	.badge-2d { background: #e0f2fe; color: #0369a1; }
	.badge-3d { background: #fef3c7; color: #b45309; }
	.badge-imax { background: #fce7f3; color: #be185d; }
	.badge-4dx { background: #f3e8ff; color: #7c3aed; }
	.badge-combo { background: var(--color-warning-bg); color: #b45309; }
	.badge-producto { background: var(--color-success-bg); color: var(--color-success); }

	.footer {
	text-align: center;
	padding: 32px 24px;
	margin-top: 32px;
	border-top: 1px solid var(--color-border);
	}

	.footer-content {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--color-light);
	font-size: 0.9rem;
	}

	.footer-logo {
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 0.9rem;
	font-weight: 800;
	}

	.footer-text { text-align: left; }
	.footer-text small { display: block; font-size: 0.75rem; color: var(--color-light); }

	@media (max-width: 900px) {
	.grid-2, .grid-3 { grid-template-columns: 1fr; }
	.kpi-grid { grid-template-columns: repeat(2, 1fr); }
	.header { flex-direction: column; }
	.header-date { text-align: left; }
	}

	@media (max-width: 500px) {
	.kpi-grid { grid-template-columns: 1fr; }
	.dashboard { padding: 20px 16px; }
	.info-bar { flex-direction: column; align-items: flex-start; }
	}

	@media print {
	body {
	background-color: white !important;
	-webkit-print-color-adjust: exact !important;
	print-color-adjust: exact !important;
	}
	.action-buttons { display: none !important; }
	.card, .kpi-card {
	break-inside: avoid !important;
	page-break-inside: avoid !important;
	box-shadow: none !important;
	border: 1px solid #e0e0e0 !important;
	}
	.card:hover, .kpi-card:hover { transform: none !important; }
	.dashboard { padding: 16px !important; max-width: 100% !important; }
	.kpi-card::before { background: var(--color-primary) !important; }
	.kpi-card.candy::before { background: var(--color-candy) !important; }
	.logo, .footer-logo { background: var(--color-primary) !important; }
	}
	</style>
	</head>
	<body>
	<div class="dashboard">

	<div class="action-buttons">
	<button class="btn btn-primary" onclick="downloadPDF()">📥 Descargar PDF</button>
	<button class="btn btn-secondary" onclick="window.print()">🖨️ Imprimir</button>
	</div>

	<div class="header">
	<div class="header-left">
	<div class="logo">C</div>
	<div>
	<h1 class="header-title">Resumen de ventas y espectadores julio 2025</h1>
	<p class="header-subtitle">Cinexo • Julio 2025</p>
	</div>
	</div>
	<div class="header-date" id="generation-date"></div>
	</div>

	<div class="info-bar">
	<div class="info-item">📅 <strong>Período:</strong> 01/07/2025 al 31/07/2025</div>
	<div class="info-item">📊 <strong>Tipo:</strong> Resumen de Ventas</div>
	</div>

	<div class="kpi-grid">
	<div class="kpi-card">
	<div class="kpi-icon">🎬</div>
	<div class="kpi-label">Espectadores</div>
	<div class="kpi-value">33.303</div>
	<div class="kpi-detail">Julio 2025</div>
	</div>
	<div class="kpi-card">
	<div class="kpi-icon">🎫</div>
	<div class="kpi-label">Recaudación Boletería</div>
	<div class="kpi-value">$91.3M</div>
	<div class="kpi-detail">Ticket promedio: $2.741</div>
	</div>
	<div class="kpi-card candy">
	<div class="kpi-icon">🍿</div>
	<div class="kpi-label">Venta Candy</div>
	<div class="kpi-value">$207.6M</div>
	<div class="kpi-detail">CPP: $6.234</div>
	</div>
	<div class="kpi-card total">
	<div class="kpi-icon">💰</div>
	<div class="kpi-label">Ingresos Totales</div>
	<div class="kpi-value">$298.9M</div>
	<div class="kpi-detail">Boletería + Candy</div>
	</div>
	</div>

	<div class="grid-2">
	<div class="card">
	<div class="card-title">🏆 Top 5 Películas por Recaudación</div>
	<div class="card-subtitle">Ingresos generados por las películas más vistas</div>
	<div class="chart-container">
	<canvas id="chartPeliculas"></canvas>
	</div>
	</div>
	<div class="card">
	<div class="card-title">🍭 Top 5 Productos de Candy por Cantidad</div>
	<div class="card-subtitle">Unidades vendidas de los productos más populares</div>
	<div class="chart-container">
	<canvas id="chartProductosCandy"></canvas>
	</div>
	</div>
	</div>

	<div class="card">
	<div class="card-title">🎬 Ranking de Películas</div>
	<div class="card-subtitle">Top 5 por espectadores e ingresos en Julio 2025</div>
	<div class="table-wrapper">
	<table class="data-table">
	<thead>
	<tr>
	<th>#</th>
	<th>Película</th>
	<th>Formato</th>
	<th class="text-right">Espectadores</th>
	<th class="text-right">Recaudación</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><span class="rank-badge rank-1">1</span></td>
	<td class="font-bold">F1 2D+4D</td>
	<td><div class="badge-container"><span class="badge badge-2d">2D</span><span class="badge badge-4dx">4D</span></div></td>
	<td class="text-right">5.374</td>
	<td class="text-right font-bold">$28.864.000</td>
	</tr>
	<tr>
	<td><span class="rank-badge rank-2">2</span></td>
	<td class="font-bold">Jurassic World: Renace 3D+4D</td>
	<td><div class="badge-container"><span class="badge badge-3d">3D</span><span class="badge badge-4dx">4D</span></div></td>
	<td class="text-right">3.930</td>
	<td class="text-right font-bold">$22.260.000</td>
	</tr>
	<tr>
	<td><span class="rank-badge rank-3">3</span></td>
	<td class="font-bold">Jurassic World: Renace 2D+4D</td>
	<td><div class="badge-container"><span class="badge badge-2d">2D</span><span class="badge badge-4dx">4D</span></div></td>
	<td class="text-right">3.087</td>
	<td class="text-right font-bold">$16.417.000</td>
	</tr>
	<tr>
	<td><span class="rank-badge rank-default">4</span></td>
	<td class="font-bold">Cómo entrenar a tu dragón 3D+4D</td>
	<td><div class="badge-container"><span class="badge badge-3d">3D</span><span class="badge badge-4dx">4D</span></div></td>
	<td class="text-right">2.728</td>
	<td class="text-right font-bold">$15.604.250</td>
	</tr>
	<tr>
	<td><span class="rank-badge rank-default">5</span></td>
	<td class="font-bold">Lilo y Stitch 3D</td>
	<td><div class="badge-container"><span class="badge badge-3d">3D</span></div></td>
	<td class="text-right">1.596</td>
	<td class="text-right font-bold">$8.152.750</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<div class="card">
	<div class="card-title">🍿 Productos Más Vendidos</div>
	<div class="card-subtitle">Confitería - Top 5 por cantidad en Julio 2025</div>
	<div class="table-wrapper">
	<table class="data-table">
	<thead>
	<tr>
	<th>#</th>
	<th>Producto</th>
	<th>Tipo</th>
	<th class="text-right">Cantidad</th>
	<th class="text-right">Total</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><span class="rank-badge rank-1">1</span></td>
	<td class="font-bold">COMBO PAREJA</td>
	<td><span class="badge badge-combo">Combo</span></td>
	<td class="text-right">3.903</td>
	<td class="text-right font-bold">$53.998.000</td>
	</tr>
	<tr>
	<td><span class="rank-badge rank-2">2</span></td>
	<td class="font-bold">COMBO MEDIANO</td>
	<td><span class="badge badge-combo">Combo</span></td>
	<td class="text-right">2.823</td>
	<td class="text-right font-bold">$26.818.500</td>
	</tr>
	<tr>
	<td><span class="rank-badge rank-3">3</span></td>
	<td class="font-bold">COMBO FAMILIA</td>
	<td><span class="badge badge-combo">Combo</span></td>
	<td class="text-right">2.459</td>
	<td class="text-right font-bold">$33.352.500</td>
	</tr>
	<tr>
	<td><span class="rank-badge rank-default">4</span></td>
	<td class="font-bold">AGUA</td>
	<td><span class="badge badge-producto">Producto</span></td>
	<td class="text-right">1.893</td>
	<td class="text-right font-bold">$6.625.500</td>
	</tr>
	<tr>
	<td><span class="rank-badge rank-default">5</span></td>
	<td class="font-bold">COMBO BALDE</td>
	<td><span class="badge badge-combo">Combo</span></td>
	<td class="text-right">1.667</td>
	<td class="text-right font-bold">$21.671.000</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<div class="footer">
	<div class="footer-content">
	<div class="footer-logo">M</div>
	<div class="footer-text">
	<strong>Powered by MostachIA</strong>
	<small>Procesos inteligentes, resultados superiores</small>
	</div>
	<span>•</span>
	<span id="footer-date"></span>
	</div>
	</div>

	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
	<script>
	document.addEventListener('DOMContentLoaded', function() {
	Chart.defaults.font.family = "'Segoe UI', system-ui, sans-serif";
	Chart.defaults.font.size = 12;
	Chart.defaults.color = '#64748b';
	Chart.defaults.plugins.legend.labels.usePointStyle = true;
	Chart.defaults.plugins.legend.labels.padding = 20;
	Chart.defaults.plugins.legend.position = 'bottom';

	const chartColors = {
	primary: '#60B99A',
	candy: '#FFB74D',
	palette: ['#60B99A', '#1F3B4D', '#7FCDB2', '#2D5066', '#4A9D80', '#FFB74D', '#5A7A8A', '#A8D5C2']
	};

	function formatCurrency(value) {
	if (value >= 1000000) return '$' + (value / 1000000).toFixed(1).replace('.',',') + 'M';
	if (value >= 1000) return '$' + (value / 1000).toFixed(0) + 'K';
	return '$' + value.toLocaleString('es-AR', { maximumFractionDigits: 0 });
	}

	const today = new Date();
	const formattedDate = `Generado: ${today.toLocaleDateString('es-AR')} ${today.toLocaleTimeString('es-AR', {hour: '2-digit', minute:'2-digit'})}`;
	document.getElementById('generation-date').textContent = formattedDate;
	document.getElementById('footer-date').textContent = today.toLocaleDateString('es-AR');

	new Chart(document.getElementById('chartPeliculas'), {
	type: 'bar',
	data: {
	labels: ['F1', 'Jurassic World 3D', 'Jurassic World 2D', 'Cómo entrenar...', 'Lilo y Stitch'],
	datasets: [{
	label: 'Recaudación',
	data: [28864000, 22260000, 16417000, 15604250, 8152750],
	backgroundColor: chartColors.palette,
	borderRadius: 8,
	borderSkipped: false,
	}]
	},
	options: {
	indexAxis: 'y',
	responsive: true,
	maintainAspectRatio: false,
	plugins: {
	legend: { display: false },
	tooltip: { callbacks: { label: ctx => formatCurrency(ctx.raw) } }
	},
	scales: {
	x: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { callback: value => formatCurrency(value) } },
	y: { grid: { display: false } }
	}
	}
	});

	new Chart(document.getElementById('chartProductosCandy'), {
	type: 'bar',
	data: {
	labels: ['Combo Pareja', 'Combo Mediano', 'Combo Familia', 'Agua', 'Combo Balde'],
	datasets: [{
	label: 'Unidades Vendidas',
	data: [3903, 2823, 2459, 1893, 1667],
	backgroundColor: chartColors.candy,
	borderRadius: 8,
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	plugins: { legend: { display: false } },
	scales: {
	y: { beginAtZero: true, grid: { color: '#f1f5f9' } },
	x: { grid: { display: false } }
	}
	}
	});
	});

	function downloadPDF() {
	const buttons = document.querySelector('.action-buttons');
	buttons.style.display = 'none';

	const element = document.querySelector('.dashboard');
	const title = document.querySelector('.header-title')?.textContent \|\| 'Dashboard';
	const date = new Date().toISOString().split('T')[0];
	const filename = 'cinexo-' + title.toLowerCase()
	.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
	.replace(/[^a-z0-9]+/g, '-')
	.replace(/-+/g, '-')
	.replace(/^-\|-$/g, '') + '-' + date + '.pdf';

	const opt = {
	margin: [8, 8, 8, 8],
	filename: filename,
	image: { type: 'jpeg', quality: 0.95 },
	html2canvas: {
	scale: 2, useCORS: true, logging: false,
	backgroundColor: '#ffffff', windowWidth: 1200
	},
	jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
	pagebreak: { mode: ['avoid-all', 'css', 'legacy'], avoid: '.card, .kpi-card' }
	};

	html2pdf().set(opt).from(element).save().then(() => {
	buttons.style.display = 'flex';
	}).catch(() => {
	buttons.style.display = 'flex';
	alert('Error al generar PDF. Intentá con Imprimir.');
	});
	}
	</script>
	</body>
	</html>
	```
No results found