/* Ventana de cuenta (registro, entrar, recuperar) — compartida por la web y el visor */
.cva { --cva-bg:#0d1f19; --cva-raised:#14302a; --cva-line:#245044; --cva-ink:#eaf3ee; --cva-muted:#9ab3a8;
  --cva-jade:#2fd67f; --cva-jade-ink:#062014; --cva-amber:#ffb547; --cva-down:#ff6b78;
  position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center; padding:18px;
  background:rgba(3,10,8,.78); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.cva.show { display:flex; }
.cva * { box-sizing:border-box; }
.cva-card { width:100%; max-width:420px; max-height:calc(100dvh - 36px); overflow-y:auto; position:relative;
  background:linear-gradient(180deg,#112a23,var(--cva-bg)); color:var(--cva-ink); border:1px solid var(--cva-line);
  border-radius:20px; padding:26px 24px 22px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  font-family:inherit; user-select:text; -webkit-user-select:text; }
.cva-x { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:10px; border:none; background:transparent;
  color:var(--cva-muted); font-size:18px; cursor:pointer; }
.cva-x:hover { color:var(--cva-ink); background:var(--cva-raised); }
.cva-steps { display:flex; gap:6px; margin-bottom:16px; }
.cva-steps i { flex:1; height:4px; border-radius:2px; background:var(--cva-line); }
.cva-steps i.on { background:var(--cva-jade); }
.cva h2 { font-size:22px; line-height:1.2; margin:0 0 6px; font-weight:800; letter-spacing:-.01em; padding-right:30px; }
.cva p.cva-sub { margin:0 0 18px; color:var(--cva-muted); font-size:14px; line-height:1.5; }
.cva-f { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.cva-f label { font-size:13px; font-weight:700; color:var(--cva-ink); }
.cva-in { width:100%; height:48px; border-radius:12px; border:1px solid var(--cva-line); background:#08150f; color:var(--cva-ink);
  padding:0 14px; font:inherit; font-size:16px; outline:none; }
.cva-in:focus { border-color:var(--cva-jade); box-shadow:0 0 0 3px rgba(47,214,127,.18); }
.cva-in::placeholder { color:#5f7d72; }
select.cva-in { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--cva-muted) 50%),linear-gradient(135deg,var(--cva-muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size:5px 5px; background-repeat:no-repeat; }
select.cva-in option { background:#0d1f19; }
.cva-pass { position:relative; }
.cva-pass .cva-in { padding-right:74px; }
.cva-pass button { position:absolute; right:6px; top:6px; height:36px; padding:0 10px; border:none; border-radius:9px; background:var(--cva-raised);
  color:var(--cva-muted); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.cva-btn { width:100%; min-height:50px; border-radius:14px; border:1px solid transparent; font:inherit; font-size:16px; font-weight:800;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:filter .12s, background .12s; }
.cva-btn.pri { background:var(--cva-jade); color:var(--cva-jade-ink); }
.cva-btn.pri:hover { filter:brightness(1.08); }
.cva-btn.alt { background:#f4f7f5; color:#1d2b25; }
.cva-btn.alt:hover { background:#fff; }
.cva-btn.ghost { background:transparent; border-color:var(--cva-line); color:var(--cva-ink); }
.cva-btn[disabled] { opacity:.6; cursor:default; }
.cva-btn svg { width:20px; height:20px; flex-shrink:0; }
.cva-or { display:flex; align-items:center; gap:12px; color:var(--cva-muted); font-size:12px; margin:14px 0; }
.cva-or::before, .cva-or::after { content:''; flex:1; height:1px; background:var(--cva-line); }
.cva-chk { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--cva-muted); margin:4px 0 14px; cursor:pointer; }
.cva-chk input { width:18px; height:18px; margin-top:1px; accent-color:var(--cva-jade); flex-shrink:0; }
.cva-legal { font-size:12px; color:var(--cva-muted); line-height:1.5; margin:12px 0 0; }
.cva-legal a, .cva-link { color:var(--cva-jade); font-weight:700; text-decoration:none; background:none; border:none; padding:0; font:inherit; cursor:pointer; }
.cva-legal a:hover, .cva-link:hover { text-decoration:underline; }
.cva-foot { margin-top:16px; text-align:center; font-size:14px; color:var(--cva-muted); }
.cva-err { display:none; background:rgba(255,107,120,.12); color:var(--cva-down); border-radius:10px; padding:10px 12px; font-size:13.5px;
  line-height:1.45; margin-bottom:12px; }
.cva-err.show { display:block; }
.cva-ok { background:rgba(47,214,127,.12); color:var(--cva-jade); border-radius:10px; padding:10px 12px; font-size:13.5px; line-height:1.45; margin-bottom:12px; }
.cva-done-ico { width:56px; height:56px; border-radius:16px; background:rgba(47,214,127,.14); color:var(--cva-jade); display:flex;
  align-items:center; justify-content:center; margin-bottom:14px; }
.cva-done-ico svg { width:28px; height:28px; }
.cva-ref { border:1px dashed rgba(255,181,71,.55); background:rgba(255,181,71,.07); border-radius:14px; padding:14px; margin:14px 0 16px; }
.cva-ref b { display:block; font-size:15px; margin-bottom:4px; }
.cva-ref p { margin:0 0 10px; font-size:13px; color:var(--cva-muted); line-height:1.45; }
.cva-ref-link { display:flex; gap:6px; }
.cva-ref-link input { flex:1; min-width:0; height:40px; border-radius:10px; border:1px solid var(--cva-line); background:#08150f; color:var(--cva-amber);
  padding:0 10px; font:inherit; font-size:13px; font-weight:700; }
.cva-ref-link button { height:40px; padding:0 12px; border-radius:10px; border:none; background:var(--cva-amber); color:#281800; font:inherit;
  font-size:13px; font-weight:800; cursor:pointer; }
.cva-share { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }
.cva-share a { height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; font-weight:700;
  text-decoration:none; color:var(--cva-ink); background:var(--cva-raised); border:1px solid var(--cva-line); }
.cva-share a:hover { border-color:var(--cva-jade); }
.cva-spin { width:18px; height:18px; border-radius:50%; border:2.5px solid currentColor; border-right-color:transparent; animation:cvaSpin .7s linear infinite; }
@keyframes cvaSpin { to { transform:rotate(360deg); } }
@media (max-width:520px) {
  .cva { padding:0; align-items:flex-end; }
  .cva-card { max-width:none; border-radius:20px 20px 0 0; max-height:94dvh; padding:24px 18px calc(20px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) { .cva-spin { animation-duration:2s; } }