:root{
  --bg:#07080d;
  --bg2:#0c0e16;
  --card:#12141d;
  --card-border:#232633;
  --ink:#f2f0e9;
  --muted:#9aa0b0;
  --gold:#d4af37;
  --gold2:#f3d27a;
  --light:#f5f2e8;
  --danger:#e5484d;
  --wa:#25d366;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(212,175,55,.06), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
}
.hidden{display:none!important}
.gold{color:var(--gold)}
.gold-strong{
  background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,#9a7b1e);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;
}
.muted{color:var(--muted)}
.small{font-size:.85rem}
h2{margin:.4rem 0 .6rem}
h3{margin:1.1rem 0 .5rem}
main{max-width:860px;margin:0 auto;padding:1rem 1rem 3rem}

/* ---------- Tarjetas y formularios ---------- */
.card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:1rem 1.1rem;
  margin:.8rem 0;
}
label{display:block;margin:.6rem 0;font-size:.92rem;color:var(--muted)}
input,select,textarea{
  width:100%;margin-top:.3rem;padding:.62rem .7rem;
  background:var(--bg2);border:1px solid var(--card-border);border-radius:10px;
  color:var(--ink);font-size:1rem;
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(212,175,55,.55);border-color:var(--gold)}
.row{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap}
.row label{flex:1;min-width:140px}
.form-error{color:#ff8a8e;min-height:1.1em;margin:.4rem 0 0}
.form-ok{color:#7dd87d;min-height:1.1em;margin:.4rem 0 0}
.stack{display:flex;flex-direction:column;gap:.6rem}
.kv{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid var(--card-border)}
.kv:last-child{border-bottom:none}

/* ---------- Botones ---------- */
button{font:inherit;cursor:pointer}
.btn-light{
  background:var(--light);color:#000;border:none;border-radius:999px;
  padding:.62rem 1.3rem;font-weight:700;margin-top:.6rem;
}
.btn-light.big{width:100%;padding:.85rem 1.3rem;font-size:1.05rem}
.btn-ghost{
  background:transparent;color:var(--ink);border:1px solid var(--card-border);
  border-radius:999px;padding:.55rem 1.1rem;margin-top:.6rem;
}
.btn-danger{
  background:var(--danger);color:#fff;border:none;border-radius:999px;
  padding:.55rem 1.1rem;margin-top:.6rem;font-weight:700;
}
.btn-whatsapp{
  display:inline-flex;align-items:center;gap:.7rem;background:var(--wa);color:#062b16;
  border-radius:999px;padding:.6rem 1.2rem;text-decoration:none;font-weight:700;margin-top:.4rem;
}
.wa-lines{display:flex;flex-direction:column;line-height:1.15}
.wa-title{font-weight:800}
.linklike{background:none;border:none;color:var(--gold);text-decoration:underline;margin-top:1rem}
.icon-btn{
  position:relative;background:var(--card);border:1px solid var(--card-border);
  border-radius:999px;width:42px;height:42px;font-size:1.1rem;color:var(--ink);
}
.badge{
  position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;
  border-radius:999px;font-size:.7rem;padding:.05rem .38rem;font-weight:700;
}

/* ---------- Entrada ---------- */
#authScreen,#ownerScreen{min-height:100vh;display:flex;justify-content:center}
.auth-wrap{width:100%;max-width:460px;padding:2rem 1rem 3rem;text-align:center}
.auth-wrap .card{text-align:left}
.auth-logo{width:min(280px,80vw);height:auto;object-fit:contain;filter:drop-shadow(0 10px 28px rgba(0,0,0,.55))}
.auth-logo.small{width:180px;height:auto}
.brand-name{letter-spacing:.14em;font-weight:800;margin:.8rem 0 .2rem}
.brand-name.small{font-size:1rem;margin:0}
.tagline{color:var(--muted);margin:.1rem 0 1rem}
.tabs{display:flex;gap:.4rem;margin-bottom:.6rem;flex-wrap:wrap}
.tab{
  background:var(--bg2);color:var(--ink);border:1px solid var(--card-border);
  border-radius:999px;padding:.5rem 1rem;font-weight:600;
}
.tab.active{background:var(--light);color:#000;border-color:var(--light)}

/* ---------- Barra superior y navegación ---------- */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:.55rem 1rem;background:rgba(7,8,13,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--card-border);
}
.topbar-brand{display:flex;align-items:center;gap:.6rem}
.topbar-logo{height:30px;width:auto;object-fit:contain}
.topbar-right{display:flex;align-items:center;gap:.6rem}
.balance-pill{
  background:var(--light);color:#000;border-radius:999px;padding:.45rem .95rem;font-weight:800;
}
.user-menu{position:relative}
.user-dropdown{
  position:absolute;right:0;top:50px;background:var(--card);border:1px solid var(--card-border);
  border-radius:12px;min-width:190px;padding:.4rem;z-index:30;display:flex;flex-direction:column;
}
.user-dropdown button{background:none;border:none;color:var(--ink);text-align:left;padding:.55rem .6rem;border-radius:8px}
.user-dropdown button:hover{background:var(--bg2)}
.user-dd-head{padding:.5rem .6rem;color:var(--gold);font-weight:700;border-bottom:1px solid var(--card-border);margin-bottom:.3rem}
.mainnav{
  display:flex;gap:.45rem;overflow-x:auto;padding:.7rem 1rem .2rem;max-width:860px;margin:0 auto;
}
.nav-btn{
  white-space:nowrap;background:var(--card);color:var(--ink);border:1px solid var(--card-border);
  border-radius:999px;padding:.5rem 1rem;font-weight:600;
}
.nav-btn.active{background:var(--light);color:#000;border-color:var(--light)}

/* ---------- Copiar Video ---------- */
.chips{display:flex;gap:.45rem;flex-wrap:wrap;margin:.4rem 0}
.chip{
  background:var(--bg2);color:var(--ink);border:1px solid var(--card-border);
  border-radius:999px;padding:.5rem 1rem;font-weight:600;
}
.chip.active{background:var(--light);color:#000;border-color:var(--light)}
.cost-box{background:var(--bg2);border:1px solid var(--card-border);border-radius:12px;padding:.8rem .95rem;margin:1rem 0}
.cost-line,.cost-total{display:flex;justify-content:space-between;padding:.28rem 0}
.cost-total{border-top:1px solid var(--card-border);margin-top:.4rem;padding-top:.55rem;font-size:1.06rem}

/* ---------- Categorías ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:4.6rem}
.cat-card{
  position:relative;background:var(--card);border:1px solid var(--card-border);
  border-radius:var(--radius);padding:4.4rem 1rem 1rem;text-align:center;overflow:visible;
}
.cat-char{
  position:absolute;left:50%;top:-64px;transform:translateX(-50%);
  height:150px;max-width:88%;object-fit:contain;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.55));
  transition:transform .25s ease;
}
.cat-card:hover .cat-char{transform:translateX(-50%) translateY(-5px)}
@media (prefers-reduced-motion: reduce){.cat-card:hover .cat-char{transform:translateX(-50%)}}
.soon-badge{
  display:inline-block;background:var(--gold);color:#000;font-weight:800;font-size:.75rem;
  border-radius:999px;padding:.22rem .7rem;letter-spacing:.08em;margin-bottom:.4rem;
}
.subchips{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;margin-top:.45rem}
.subchip{border:1px solid var(--card-border);border-radius:999px;padding:.18rem .6rem;font-size:.8rem;color:var(--muted)}

/* ---------- Proyectos / seguimiento ---------- */
.project-card h3{margin:.2rem 0 .4rem}
.progress{height:10px;background:var(--bg2);border-radius:999px;overflow:hidden;margin:.5rem 0}
.progress > div{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.state-pill{border-radius:999px;padding:.15rem .65rem;font-size:.8rem;font-weight:700;border:1px solid var(--card-border)}
.state-completado{background:#14351c;color:#7dd87d}
.state-requiere_creditos{background:#3a2c07;color:var(--gold2)}
.state-en_produccion{background:#12283a;color:#7db8d8}
.project-actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.5rem}
.project-actions button{margin-top:0}

/* ---------- MOV ---------- */
.balance-card{text-align:center}
.balance-big{font-size:2.2rem}
.pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}
.pack{text-align:center;margin:0}
.pack-mov{font-size:1.25rem;font-weight:800}
.pack-price{color:var(--gold2);font-size:1.1rem;font-weight:700;margin-top:.2rem}
.pack-off{color:var(--muted);font-size:.85rem;margin-top:.2rem}
table.movements{width:100%;border-collapse:collapse}
table.movements th,table.movements td{padding:.45rem .3rem;border-bottom:1px solid var(--card-border);text-align:left;font-size:.92rem}
table.movements td:last-child,table.movements th:last-child{text-align:right}
.mov-pos{color:#7dd87d;font-weight:700}
.mov-neg{color:#ff8a8e;font-weight:700}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;
  background:var(--light);color:#000;font-weight:700;border-radius:999px;
  padding:.7rem 1.3rem;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:92vw;text-align:center;
}

/* Botones de pago PayPal en los paquetes (Mis MOV) */
.btn-paypal{display:block;text-align:center;background:#0070ba;color:#fff;font-weight:700;padding:10px 12px;border-radius:10px;text-decoration:none;margin-top:10px}
.btn-paypal:hover{background:#005ea6}
.btn-paypal b{font-style:italic}