<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#070b1e" />
  <title>Textos legales — SkyWings RP</title>
  <meta name="description" content="Aviso legal, términos, privacidad, cookies, exención y licencia de uso." />

  <link rel="icon" type="image/png" href="/assets/skywingsrp.png" />
  <link rel="apple-touch-icon" href="/assets/skywingsrp.png" />

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Poppins:wght@700;800&display=swap" rel="stylesheet" />

  <style>
    :root{
      --bg-1:#0a102c; --bg-2:#0d1540; --bg-3:#0a1033;
      --violet:#7a2cff; --magenta:#e83a95; --cyan:#21d4fd; --gold:#ffba3a;
      --text:#eef3ff; --muted:#b9c3dd; --line:rgba(255,255,255,.10);
      --shadow:0 18px 60px rgba(0,0,0,.45);
      --ease:cubic-bezier(.2,.8,.2,1);
      --r:14px; --r-lg:16px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--text);
      font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,Arial;
      overflow-x:hidden;
      position:relative;
      min-height:100svh;
      padding-top:64px;
      background: var(--bg-1);
    }

    body::before{
      content:"";
      position:fixed; inset:-200px -120px;
      background:
        radial-gradient(1200px 800px at 70% -10%,rgba(33,212,253,.16),transparent 60%),
        radial-gradient(900px 700px at -10% 30%,rgba(122,44,255,.18),transparent 60%),
        radial-gradient(900px 700px at 60% 110%,rgba(232,58,149,.10),transparent 62%),
        linear-gradient(180deg,var(--bg-2),var(--bg-1));
      filter:blur(10px);
      z-index:-3;
      pointer-events:none;
    }
    body::after{
      content:"";
      position:fixed; inset:0;
      background:radial-gradient(900px 600px at 50% 18%, rgba(255,255,255,.06), transparent 70%);
      z-index:-2;
      pointer-events:none;
    }

    a{color:inherit;text-decoration:none}
    .container{max-width:1160px;margin:auto;padding:0 24px}

    .nav{
      position:fixed;top:0;left:0;right:0;z-index:50;
      background:linear-gradient(180deg,rgba(12,18,55,.78),rgba(12,18,55,.40));
      backdrop-filter:blur(12px);
      border-bottom:1px solid var(--line);
    }
    .nav .row{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
    .brand{display:flex;align-items:center;gap:12px;font-weight:900}
    .brand img{height:34px;width:auto;display:block}
    .menu{display:flex;gap:10px;align-items:center}
    .menu a{
      padding:10px 12px;border-radius:12px;
      color:rgba(238,243,255,.78);font-weight:900;
      border:1px solid transparent;
      transition:background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
      white-space:nowrap;
    }
    .menu a:hover{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.10);
      transform:translateY(-1px);
    }

    .stars{position:fixed;inset:0;pointer-events:none;z-index:-1}
    .star{
      position:absolute;width:2px;height:2px;
      background:radial-gradient(circle, #fff, rgba(255,255,255,.22) 60%, transparent 70%);
      opacity:.85;
      animation:float var(--t) linear infinite;
    }
    @keyframes float{to{transform:translateY(100vh);opacity:.12}}
    @media (prefers-reduced-motion: reduce){ .star{animation:none} }

    main{padding:28px 0 90px}

    .page-title{
      text-align:center;
      margin:0 0 18px;
      font-size:clamp(30px,4.6vw,54px);
      line-height:1.06;
      padding-bottom:.05em;
      font-weight:900;
      letter-spacing:-1.0px;
      font-family:"Poppins","Outfit",system-ui;
      background:linear-gradient(95deg,var(--cyan),var(--magenta) 45%,var(--violet) 85%);
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;color:transparent;
      filter:
        drop-shadow(0 18px 80px rgba(33,212,253,.22))
        drop-shadow(0 10px 40px rgba(232,58,149,.14));
    }
    .page-sub{
      text-align:center;
      margin:0 0 22px;
      color:rgba(238,243,255,.78);
      line-height:1.65;
    }

    .grid{
      display:grid;
      grid-template-columns:380px 1fr;
      gap:18px;
      align-items:start;
    }

    .panel{
      border:1px solid rgba(255,255,255,.12);
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06));
      border-radius:var(--r-lg);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .panel::before{
      content:"";
      position:absolute; inset:-1px;
      border-radius:inherit;
      background:linear-gradient(120deg, rgba(33,212,253,.14), rgba(232,58,149,.10), rgba(122,44,255,.10));
      filter:blur(16px);
      opacity:.35;
      pointer-events:none;
    }
    .panel > *{position:relative}

    .list{padding:14px;display:grid;gap:10px}

    .item{
      display:flex;gap:10px;align-items:center;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);
      transition:transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
      cursor:pointer;
      user-select:none;
      outline:none;
    }
    .item:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.08)}
    .item.active{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.10)}
    .item:focus-visible{box-shadow:0 0 0 3px rgba(33,212,253,.25)}

    .dot{
      width:10px;height:10px;border-radius:50%;
      background:linear-gradient(90deg,var(--violet),var(--cyan));
      flex:0 0 auto;
    }
    .itxt{display:grid;gap:2px;min-width:0}
    .itxt strong{
      font-size:14px;color:#fff;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis
    }
    .itxt span{
      font-size:12px;
      color:rgba(238,243,255,.72);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }

    .actions{
      display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;
      padding:14px;
      background:transparent;
      border-top:1px solid rgba(255,255,255,.10);
    }
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      padding:12px 16px;border-radius:14px;
      font-weight:900;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:#fff;
      cursor:pointer;
      transition:transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
    .btn.primary{
      border:0;
      background:linear-gradient(120deg,var(--cyan),var(--magenta));
      box-shadow:0 18px 60px rgba(0,0,0,.45);
    }

    .viewer{padding:18px 18px 26px}
    .md{
      color:rgba(238,243,255,.88);
      line-height:1.75;
      font-size:15px;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .md h1,.md h2,.md h3{color:#fff;line-height:1.2}
    .md h1{font-size:26px;margin:0 0 12px}
    .md h2{font-size:18px;margin:18px 0 10px}
    .md h3{font-size:16px;margin:14px 0 8px}
    .md p{margin:10px 0}
    .md ul{margin:10px 0 10px 18px}
    .md li{margin:7px 0}
    .md a{color:#fff;text-decoration:underline;text-underline-offset:3px}
    .md code{
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      font-size:0.95em;
      padding:.15em .35em;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.18);
      color:#fff;
    }

    @media (max-width:980px){
      .grid{grid-template-columns:1fr}
      .actions{justify-content:center}
    }
    @media (max-width:560px){
      .container{padding:0 16px}
      .menu{gap:6px}
      .menu a{padding:10px 10px}
    }
  </style>
</head>

<body>
  <div class="stars" aria-hidden="true"></div>

  <nav class="nav">
    <div class="container row">
      <a class="brand" href="/"><img src="/assets/skywingsrp.png" alt="SkyWings" /><span>SkyWings RP</span></a>
      <div class="menu" style="margin-left:auto">
        <a href="/app_web">Aplicación en web</a>
        <a href="/normativa">Normativa</a>
        <a href="/#changelog">Changelog</a>
        <a href="/#faq">FAQ</a>
      </div>
    </div>
  </nav>

  <main>
    <div class="container">
      <h1 class="page-title">Textos legales</h1>
      <p class="page-sub">Última actualización: <strong id="lu">—</strong></p>

      <div class="grid">
        <aside class="panel" aria-label="Listado de documentos">
          <div class="list" id="docList"></div>
          <div class="actions">
            <a class="btn" href="/">Volver al inicio</a>
            <a class="btn primary" href="https://discord.gg/xCvfDwHXRN" target="_blank" rel="noopener">Abrir ticket en Discord</a>
          </div>
        </aside>

        <section class="panel" aria-label="Documento">
          <div class="viewer">
            <div class="md" id="docView">Cargando…</div>
          </div>
        </section>
      </div>
    </div>
  </main>

  <script>
    // ============================================================
    // STARS
    // ============================================================
    const stars = document.querySelector('.stars');
    const makeStars = (n, inView=false) => {
      if (!stars) return;
      const frag = document.createDocumentFragment();
      for(let i=0;i<n;i++){
        const s = document.createElement('div'); s.className = 'star';
        const size = Math.random() < .12 ? 3 : 2;
        s.style.width = size+'px';
        s.style.height = size+'px';
        s.style.left = Math.random()*100+'vw';
        s.style.top  = (inView ? Math.random()*100 : -Math.random()*100) + 'vh';
        s.style.setProperty('--t', (10 + Math.random()*22)+'s');
        frag.appendChild(s);
      }
      stars.appendChild(frag);
    };
    makeStars(110, true);
    window.addEventListener('load', ()=> makeStars(120, false), { once:true });

    // ============================================================
    // LEGAL (DECODE "SMART" PARA EVITAR � / Ã³ / Ã±)
    // ============================================================
    const LEGAL_JSON = '/assets/legal/legal.json';
    const LEGAL_BASE = '/assets/legal/';

    const escapeHtml = (str)=> String(str ?? '')
      .replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;')
      .replaceAll('"','&quot;').replaceAll("'","&#039;");

    function countFFFD(s){
      return (s.match(/\uFFFD/g) || []).length; // �
    }

    function repairMojibake(s){
      // UTF-8 mal interpretado como Latin-1 (Ã³, Ã±, etc.)
      const looksBad = /Ã.|Â|â€|â€™|â€œ|â€�/.test(s);
      if(!looksBad) return s;

      // Interpretar el string como bytes Latin-1 y decodificar como UTF-8
      const bytes = Uint8Array.from(s, c => c.charCodeAt(0) & 0xFF);
      const fixed = new TextDecoder('utf-8', { fatal:false }).decode(bytes);

      const bad1 = (s.match(/Ã.|Â|â€|â€™|â€œ|â€�/g) || []).length;
      const bad2 = (fixed.match(/Ã.|Â|â€|â€™|â€œ|â€�/g) || []).length;
      return bad2 < bad1 ? fixed : s;
    }

    function decodeBest(buf){
      const u8 = new Uint8Array(buf);
      const candidates = [
        { name: 'utf-8',        dec: new TextDecoder('utf-8', { fatal:false }) },
        { name: 'windows-1252', dec: new TextDecoder('windows-1252', { fatal:false }) },
        { name: 'iso-8859-1',   dec: new TextDecoder('iso-8859-1', { fatal:false }) },
      ];

      let best = null;

      for (const c of candidates){
        const txt = c.dec.decode(u8);
        const score = countFFFD(txt); // menos � = mejor
        if (!best || score < best.score) best = { txt, score, name: c.name };
        if (score === 0) break;
      }

      return repairMojibake(best.txt);
    }

    async function fetchTextFixed(url){
      const r = await fetch(url, { cache:'no-cache' });
      if(!r.ok) throw new Error('No se pudo cargar: ' + url + ' (HTTP ' + r.status + ')');
      const buf = await r.arrayBuffer();
      return decodeBest(buf);
    }

    async function fetchJsonFixed(url){
      const txt = await fetchTextFixed(url);
      return JSON.parse(txt);
    }

    function inlineFormat(s){
      // s ya viene escapado (sin HTML ejecutable)

      // links [texto](url)
      s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_m, t, u) => {
        return '<a href="'+u+'" target="_blank" rel="noopener">'+t+'</a>';
      });

      // código `...`
      s = s.replace(/`([^`]+)`/g, (_m, code) => '<code>'+code+'</code>');

      // negrita **...**
      s = s.replace(/\*\*([^*]+)\*\*/g, (_m, t) => '<strong>'+t+'</strong>');

      // cursiva *...* (simple)
      s = s.replace(/(^|[^*])\*([^*]+)\*(?!\*)/g, (_m, pre, t) => pre + '<em>' + t + '</em>');

      return s;
    }

    function mdToHtml(md){
      const lines = String(md ?? '').replace(/\r/g,'').split('\n');
      const out = [];
      let inUl = false;

      const closeUl = ()=>{ if(inUl){ out.push('</ul>'); inUl=false; } };

      for(const raw of lines){
        const line = raw.replace(/\s+$/,'');
        if(!line.trim()){ closeUl(); continue; }

        if(line.startsWith('# ')){ closeUl(); out.push('<h1>'+inlineFormat(escapeHtml(line.slice(2).trim()))+'</h1>'); continue; }
        if(line.startsWith('## ')){ closeUl(); out.push('<h2>'+inlineFormat(escapeHtml(line.slice(3).trim()))+'</h2>'); continue; }
        if(line.startsWith('### ')){ closeUl(); out.push('<h3>'+inlineFormat(escapeHtml(line.slice(4).trim()))+'</h3>'); continue; }

        if(line.trim().startsWith('- ')){
          if(!inUl){ out.push('<ul>'); inUl = true; }
          out.push('<li>'+inlineFormat(escapeHtml(line.trim().slice(2)))+'</li>');
          continue;
        }

        closeUl();
        out.push('<p>'+inlineFormat(escapeHtml(line))+'</p>');
      }

      closeUl();
      return out.join('\n');
    }

    const docList = document.getElementById('docList');
    const docView = document.getElementById('docView');
    const lu = document.getElementById('lu');
    let legalData = null;

    function setActive(id){
      [...docList.querySelectorAll('.item')].forEach(el=>{
        el.classList.toggle('active', el.getAttribute('data-id') === id);
      });
    }

    async function openDoc(id){
      if(!legalData) return;
      const docs = legalData.documents || [];
      const doc = docs.find(d => d.id === id) || docs[0];
      if(!doc) return;

      setActive(doc.id);
      location.hash = encodeURIComponent(doc.id);

      try{
        const md = await fetchTextFixed(LEGAL_BASE + doc.file);
        docView.innerHTML = mdToHtml(md);
      }catch(e){
        console.error('[LEGAL] doc load error:', e);
        docView.textContent = 'No se pudo cargar el documento.';
      }
    }

    async function init(){
      try{
        legalData = await fetchJsonFixed(LEGAL_JSON);
        lu.textContent = (legalData.last_update || '—');

        const docs = legalData.documents || [];
        docList.innerHTML = docs.map(d => `
          <div class="item" role="button" tabindex="0" data-id="${escapeHtml(d.id)}">
            <span class="dot"></span>
            <div class="itxt">
              <strong>${escapeHtml(d.title || '')}</strong>
              <span>Documento legal</span>
            </div>
          </div>
        `).join('');

        docList.querySelectorAll('.item').forEach(el=>{
          const id = el.getAttribute('data-id');

          el.addEventListener('click', ()=> openDoc(id));
          el.addEventListener('keydown', (e)=>{
            if(e.key === 'Enter' || e.key === ' '){
              e.preventDefault();
              openDoc(id);
            }
          });
        });

        const hash = decodeURIComponent((location.hash || '').replace('#','')).trim();
        await openDoc(hash || (docs[0] ? docs[0].id : ''));

        window.addEventListener('hashchange', ()=>{
          const h = decodeURIComponent((location.hash || '').replace('#','')).trim();
          if(h) openDoc(h);
        });

      }catch(e){
        console.error('[LEGAL] init error:', e);
        docList.innerHTML = '';
        docView.textContent = 'No se pudo cargar la lista de documentos.';
      }
    }

    init();
  </script>
</body>
</html>