<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tarificador por Visualización — Calculadora</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root{
--bg:#0f1724; --card:#0b1220; --muted:#9aa4b2; --accent:#7c3aed; --glass: rgba(255,255,255,0.03);
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
body{margin:0; background:linear-gradient(180deg,#071028 0%, #071a2b 100%); color:#e6eef6; min-height:100vh; padding:28px}
.container{max-width:1100px;margin:0 auto}
header{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#3b82f6);display:flex;align-items:center;justify-content:center;font-weight:700;color:white}
h1{font-size:20px;margin:0}
p.lead{margin:0;color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:1fr 420px;gap:18px}
.card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(2,6,23,0.6);}
.form-row{display:flex;gap:12px;margin-bottom:12px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input[type=number], select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:var(--glass);color:inherit;font-size:14px}
.input-group{flex:1}
.small{font-size:12px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:var(--accent);color:white;border:none;cursor:pointer;font-weight:600}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.results{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.result-item{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:10px}
.big{font-size:18px;font-weight:700}
.muted{color:var(--muted);font-size:13px}
footer{margin-top:20px;color:var(--muted);font-size:13px}
@media (max-width:980px){.grid{grid-template-columns:1fr}.results{grid-template-columns:1fr}}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">TV</div>
<div>
<h1>Tarificador por Visualización</h1>
<p class="lead">Calcula el costo estimado según vistas, CPM, viewability y formato. Incluye gráfica de costo vs vistas.</p>
</div>
</header>
<main class="grid">
<!-- Left: Inputs + Chart -->
<section class="card">
<h3 style="margin-top:0">Entradas</h3>
<div class="form-row">
<div class="input-group">
<label>Vistas (impresiones) estimadas</label>
<input id="views" type="number" min="0" step="1" value="100000">
<div class="small">Cantidad de impresiones o visualizaciones.</div>
</div>
<div style="width:120px">
<label>CPM base (USD)</label>
<input id="cpm" type="number" min="0" step="0.01" value="5">
<div class="small">Costo por mil impresiones.</div>
</div>
</div>
<div class="form-row">
<div class="input-group">
<label>Viewability (%)</label>
<input id="viewability" type="number" min="0" max="100" step="0.1" value="70">
<div class="small">Porcentaje de vistas que son visibles (ej. 70 = 70%).</div>
</div>
<div style="width:160px">
<label>Multiplicador por Formato</label>
<select id="formatMultiplier">
<option value="1">Banner (2.2x)</option>
<option value="1">Banner (2.22)</option>
<option value="1.25">Video (1.25x)</option>
<option value="1.5">Rich Media (1.5x)</option>
<option value="0.8">Nativo (0.8x)</option>
</select>
<div class="small">Ajuste según formato del inventario.</div>
</div>
</div>
<div class="form-row">
<div class="input-group">
<label>Tasa de Fill (%)</label>
<input id="fillRate" type="number" min="0" max="100" step="0.1" value="95">
<div class="small">Porcentaje del inventario que realmente se monetiza.</div>
</div>
<div style="width:160px">
<label>Fee fijo (USD)</label>
<input id="fixedFee" type="number" min="0" step="0.01" value="0">
<div class="small">Costos fijos adicionales (ej. plataforma).</div>
</div>
</div>
<div style="display:flex;gap:10px;margin-top:8px">
<button class="btn" id="calc">Calcular</button>
<button class="btn secondary" id="reset">Reiniciar</button>
</div>
<div class="results" id="results">
<div class="result-item">
<div class="muted">Costo estimado (USD)</div>
<div class="big" id="estimatedCost">—</div>
</div>
<div class="result-item">
<div class="muted">RPM efectivo (USD por 1000 vistas monetizadas)</div>
<div class="big" id="effectiveRPM">—</div>
</div>
<div class="result-item">
<div class="muted">Impresiones monetizadas</div>
<div class="big" id="monetizedImps">—</div>
</div>
<div class="result-item">
<div class="muted">CPM aplicado (USD)</div>
<div class="big" id="appliedCPM">—</div>
</div>
</div>
<hr style="margin:16px 0;border:none;border-top:1px solid rgba(255,255,255,0.03)">
<h3 style="margin:0 0 8px 0">Gráfica — Costo vs Vistas</h3>
<canvas id="chart" height="160"></canvas>
</section>
<!-- Right: Explanation / Quick presets -->
<aside class="card">
<h3>Presets rápidos</h3>
<div style="display:flex;flex-direction:column;gap:8px;margin-bottom:12px">
<button class="btn secondary" onclick="applyPreset(100000,5,70,95,1)">Ejemplo: 100k vistas, CPM 5</button>
<button class="btn secondary" onclick="applyPreset(500000,3.5,60,90,1.25)">Campaña video 500k</button>
<button class="btn secondary" onclick="applyPreset(2000000,2,50,85,0.8)">Nativo 2M</button>
</div>
<h3>Cómo funciona/o las metricas que lo conforman politicas que la rigen</h3>
<ol style="color:var(--muted);font-size:14px">
<li>Se calcula cuántas impresiones se monetizan: <code>views × fillRate × viewability</code>.</li>
<li>Se aplica el CPM ajustado por formato: <code>cpm × formatMultiplier</code>.</li>
<li>Coste = (impresiones monetizadas / 1000) × CPM aplicado + fee fijo.</li>
<li>priorizar que se debe colocar (medios), nota personal, puede ser retransmisiones de casas de apuestas, o medios magneticos(videos, fi¿fotos, notas entre otros...</li>
<li>eventos en vivo</li>
</ol>
<h3 style="margin-top:12px">Exportar</h3>
<div style="display:flex;gap:8px">
<button class="btn secondary" id="copyBtn">Copiar resultados</button>
<button class="btn" id="downloadCsv">Descargar CSV</button>
</div>
<footer>
<div style="margin-top:14px">Diseñado para estimaciones rápidas. No sustituye un sistema de facturación.</div>
</footer>
</aside>
</main>
</div>
<script>
// Helpers
const $ = id => document.getElementById(id);
function formatUSD(v){ return