<?php
if (count(get_included_files()) === 1) { http_response_code(403); exit('Forbidden'); }
$sellerNav = $sellerNav ?? '';
$ctx       = $ctx ?? ['role' => 'seller', 'display_name' => ''];
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($page_title ?? 'Vale · Vendedores'); ?></title>
<link rel="stylesheet" href="/css/style.css">
<style>
  .sl-wrap{display:flex;min-height:100vh;background:var(--color-crema)}
  .sl-side{
    width:220px;flex:0 0 220px;background:var(--color-tierra);
    display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
  }
  .sl-logo{padding:1.2rem 1.25rem .8rem;border-bottom:1px solid rgba(255,255,255,.08)}
  .sl-logo img{height:28px;width:auto}
  .sl-logo .tag{font-size:.65rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:4px}
  .sl-nav{list-style:none;padding:.6rem 0;flex:1}
  .sl-nav li a{
    display:flex;align-items:center;gap:10px;padding:.65rem 1.25rem;
    font-size:.85rem;font-weight:600;color:rgba(255,255,255,.55);
    text-decoration:none;border-left:3px solid transparent;transition:.15s;
  }
  .sl-nav li a:hover{color:#fff;background:rgba(255,255,255,.05)}
  .sl-nav li.active a{color:#fff;border-left-color:var(--color-oro);background:rgba(255,255,255,.07)}
  .sl-foot{padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.08)}
  .sl-foot .name{font-size:.8rem;font-weight:700;color:#fff}
  .sl-foot .role{font-size:.7rem;color:rgba(255,255,255,.35);margin-top:1px}
  .sl-foot a{display:block;margin-top:.7rem;font-size:.78rem;color:rgba(255,255,255,.4);text-decoration:none}
  .sl-foot a:hover{color:#fff}
  .sl-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow-x:hidden}
  .sl-topbar{
    background:#fff;border-bottom:1px solid var(--color-border);
    padding:.85rem 2rem;display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:10;
  }
  .sl-topbar h1{font-family:var(--font-headings);font-size:1.2rem;color:var(--color-tierra);margin:0}
  .sl-body{padding:1.5rem 2rem;flex:1;overflow-y:auto}

  /* Cards */
  .kpi-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem}
  .kpi{background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:.9rem 1.25rem;min-width:130px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
  .kpi .kv{font-family:var(--font-headings);font-size:1.8rem;font-weight:600;color:var(--color-barro);line-height:1}
  .kpi .kl{font-size:.72rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:5px}

  /* Table */
  .tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;font-size:.84rem;box-shadow:0 1px 4px rgba(0,0,0,.05)}
  .tbl thead tr{background:var(--color-tierra);color:#FBF6EE;text-align:left}
  .tbl th{padding:.65rem 1rem;font-weight:600;font-size:.78rem;letter-spacing:.03em}
  .tbl td{padding:.65rem 1rem;border-top:1px solid var(--color-border);vertical-align:middle}
  .tbl tbody tr:hover{background:#faf6f1}

  /* Badges */
  .badge{display:inline-block;font-size:.7rem;font-weight:700;border-radius:99px;padding:2px 9px;letter-spacing:.3px}
  .badge-active{background:rgba(30,122,77,.1);color:#1E7A4D}
  .badge-free{background:rgba(100,90,80,.1);color:#665D55}
  .badge-trial{background:rgba(224,163,62,.1);color:#B07B1A}
  .badge-past_due{background:rgba(192,57,43,.1);color:#C0392B}
  .badge-canceled{background:rgba(192,57,43,.08);color:#999}
  .badge-paid{background:rgba(30,122,77,.1);color:#1E7A4D}
  .badge-pending{background:rgba(224,163,62,.1);color:#B07B1A}
  .badge-setup{background:rgba(168,51,26,.1);color:var(--color-barro)}
  .badge-mrr{background:rgba(0,120,200,.1);color:#0078C8}

  /* Activate modal */
  .modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;align-items:center;justify-content:center}
  .modal-bg.open{display:flex}
  .modal{background:#fff;border-radius:16px;padding:1.75rem;width:100%;max-width:420px;box-shadow:0 20px 50px rgba(0,0,0,.2)}
  .modal h3{font-family:var(--font-headings);margin:0 0 1.2rem;color:var(--color-tierra)}
  .modal label{font-size:.82rem;display:block;margin-bottom:.6rem}
  .modal select,.modal input{width:100%;padding:.55rem .75rem;border:1px solid var(--color-border);border-radius:8px;font-family:var(--font-body);font-size:.9rem;margin-top:3px}
  .modal .actions{display:flex;gap:.6rem;margin-top:1.2rem}
</style>
</head>
<body>
<div class="sl-wrap">
  <!-- Sidebar -->
  <aside class="sl-side">
    <div class="sl-logo">
      <img src="/img/logo-white.png" alt="Vale">
      <div class="tag">Vendedores</div>
    </div>
    <ul class="sl-nav">
      <li class="<?= $sellerNav==='recursos'?'active':'' ?>">
        <a href="/seller/recursos">
          <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
          Inicio
        </a>
      </li>
      <li class="<?= $sellerNav==='tenants'?'active':'' ?>">
        <a href="/seller/tenants">
          <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0H5m14 0h2M5 21H3"/></svg>
          Mi pipeline
        </a>
      </li>
      <li class="<?= $sellerNav==='commissions'?'active':'' ?>">
        <a href="/seller/commissions">
          <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          Comisiones
        </a>
      </li>
    </ul>
    <div class="sl-foot">
      <div class="name"><?= htmlspecialchars($ctx['display_name']) ?></div>
      <div class="role"><?= $ctx['role'] === 'super_admin' ? 'Super Admin' : 'Vendedor' ?></div>
      <a href="/logout">Cerrar sesión</a>
    </div>
  </aside>

  <!-- Main -->
  <div class="sl-main">
    <div class="sl-topbar">
      <h1><?= htmlspecialchars($page_title ?? '') ?></h1>
      <div style="font-size:.82rem;color:var(--color-text-muted)">
        <?= date('d M Y') ?>
      </div>
    </div>
    <div class="sl-body">
      <?php echo $content ?? '' ?>
    </div>
  </div>
</div>
</body>
</html>
