/* ==========================================================================
   LinkBoard — shared site design system
   Every public page (landing, auth, dashboard, membership, support, legal)
   builds on these tokens and components so the whole site reads as one
   product, at the same level as the editor. Mobile-first throughout.
   ========================================================================== */

:root{
  --bg:#080b13; --bg2:#0d1322;
  --surface:rgba(255,255,255,.045); --surface2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.14);
  --text:#f3f6fb; --muted:#8b98ae; --muted2:#657189;
  --accent:#8b5cf6; --accent2:#a855f7; --frame:#05070c;
  --grad:linear-gradient(135deg,#7c3aed,#a855f7);
  --grad-soft:linear-gradient(135deg,rgba(124,58,237,.22),rgba(168,85,247,.14));
  --ok:#34d399; --danger:#f87171; --warn:#fbbf24;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:20px; --radius-sm:14px;
  --shadow:0 20px 50px rgba(0,0,0,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:var(--font);color:var(--text);
  background:
    radial-gradient(1100px 700px at 50% -10%,rgba(124,58,237,.16),transparent 55%),
    radial-gradient(900px 600px at 90% 110%,rgba(56,189,248,.08),transparent 50%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea,select{font-family:inherit}
a{color:inherit}
img{max-width:100%}

/* ---------- phone frame ----------
   The product is a phone-shaped app, so a page that opts in with $phoneFrame
   stays one narrow column at every width and, on a desktop screen, sits inside
   a device frame that scrolls internally — the same shell the editor uses.
   Under the breakpoint it is an ordinary full-bleed page. */
.phone{width:100%;max-width:460px;margin-inline:auto;position:relative}

@media (min-width:560px){
  body.phone-mode{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:22px 0}
  /* Fills the height it is given. It used to stop at 940px, which looked right
     on a laptop but left a small frame stranded in the middle of a tall screen
     — on an iPad Pro it filled barely two thirds of the page. The width stays
     capped because the content is designed for a phone column; only the height
     follows the screen. */
  .phone{height:calc(100vh - 44px);height:calc(100dvh - 44px);display:flex;flex-direction:column;
    background:var(--bg2);border:10px solid var(--frame);border-radius:42px;overflow:hidden;
    box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
  /* the bar pins to the top of the frame, not of the viewport */
  .phone > .nav{flex:0 0 auto;position:static}
  .phone-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:none}
  .phone-scroll::-webkit-scrollbar{display:none}
}

/* ---------- layout ---------- */
.site-wrap{width:min(1060px,100%);margin-inline:auto;padding:0 18px}
.site-main{padding-bottom:40px}
/* content pages (support, legal) keep their own inner styles on this shell */
.container{width:min(1060px,100%);margin-inline:auto;padding:24px 18px 40px}

/* ---------- top navigation ----------
   Hard rule: nav labels NEVER wrap to a second line. Everything here is
   nowrap + no-shrink, and secondary actions are icon-only so the bar always
   fits a phone-width column. Only the brand may shrink, and it ellipsises. */
.nav{position:sticky;top:0;z-index:60;
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  background:rgba(8,11,19,.72);border-bottom:1px solid var(--line)}
/* container-type so the breakpoints below follow the BAR's width, not the
   viewport's — the bar will soon live inside a phone-width column. */
.nav-in{display:flex;align-items:center;gap:10px;width:min(1060px,100%);margin-inline:auto;
  padding:10px 16px;container-type:inline-size}

.nav-brand{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto;
  font-weight:850;letter-spacing:-.035em;font-size:1rem;text-decoration:none;
  white-space:nowrap;overflow:hidden}
.nav-brand .dot{flex:0 0 auto;width:9px;height:9px;border-radius:99px;background:var(--grad);
  box-shadow:0 0 10px rgba(139,92,246,.75);transition:width .18s ease,height .18s ease}

/* Too tight for the wordmark: drop to the dot as a compact mark rather than
   showing a half-cut "LinkBoar…". The threshold is the space the widest bar
   actually needs — brand 88 + actions 188 + gaps 21 ≈ 297 — measured against
   the container's CONTENT box, which is what @container resolves against. */
@container (max-width:300px){
  .nav-brand .word{display:none}
  .nav-brand .dot{width:13px;height:13px}
}
@supports not (container-type: inline-size){
  @media (max-width:332px){          /* same point, expressed as viewport width */
    .nav-brand .word{display:none}
    .nav-brand .dot{width:13px;height:13px}
  }
}

.nav-links{margin-left:auto;display:flex;align-items:center;gap:7px;flex:0 0 auto}

/* text button (only ever the primary CTA) */
.nav-a{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  flex:0 0 auto;height:40px;padding:0 15px;border-radius:12px;
  font-size:.86rem;font-weight:750;letter-spacing:-.015em;color:var(--muted);
  text-decoration:none;white-space:nowrap;
  transition:color .16s ease,background .16s ease,filter .16s ease}
.nav-a:hover{color:var(--text);background:var(--surface2)}
.nav-a.on{color:var(--text)}
/* outlined variant: reads as a real button next to the CTA without competing
   with it — transparent fill, white label. box-sizing keeps it 40px tall. */
.nav-a.ghost{background:transparent;border:1px solid var(--line2);color:#fff}
.nav-a.ghost:hover{background:var(--surface2);border-color:rgba(255,255,255,.3)}
.nav-a.cta{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(124,58,237,.32)}
.nav-a.cta:hover{filter:brightness(1.08);background:var(--grad)}
.nav-a svg{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* icon-only action: fixed square, so it can never reflow */
.nav-ico{display:inline-grid;place-items:center;flex:0 0 auto;width:40px;height:40px;
  border-radius:12px;color:var(--muted);text-decoration:none;
  transition:color .16s ease,background .16s ease}
.nav-ico:hover{color:var(--text);background:var(--surface2)}
.nav-ico.on{color:var(--text);background:var(--surface2)}
.nav-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:400px){
  .nav-in{gap:8px;padding:10px 13px}
  .nav-brand{font-size:.94rem}
  .nav-a{padding:0 13px;font-size:.83rem}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  /* text-align: si un texto largo salta de línea en un móvil estrecho, que las
     dos líneas vayan centradas y no pegadas a la izquierda */
  min-height:48px;padding:0 22px;border-radius:15px;text-align:center;
  font-size:.95rem;font-weight:800;letter-spacing:-.015em;text-decoration:none;
  transition:transform .16s ease,filter .16s ease,background .16s ease,border-color .16s ease}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 30px rgba(124,58,237,.38)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);border:1px solid var(--line2);color:var(--text)}
.btn-ghost:hover{background:var(--surface2);border-color:rgba(255,255,255,.22)}
.btn-danger{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.35);color:#fca5a5}
.btn-danger:hover{background:rgba(248,113,113,.2)}
.btn-block{width:100%}
/* La letra pequeña bajo un formulario (el aviso de privacidad del registro). */
.auth-fine{margin:12px 0 0;text-align:center;color:var(--muted2);font-size:.76rem;line-height:1.5}
.auth-fine a{color:var(--muted);font-weight:700;text-decoration:underline}
.btn-lg{min-height:54px;padding:0 28px;font-size:1.02rem;border-radius:17px}
.btn-sm{min-height:38px;padding:0 15px;font-size:.84rem;border-radius:12px}

/* ---------- cards & panels ---------- */
.card{background:linear-gradient(180deg,rgba(18,26,43,.75),rgba(12,18,30,.85));
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card-t{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.card-t b{font-size:1.02rem;letter-spacing:-.02em}
.card-t svg{width:19px;height:19px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card-t .spacer{margin-left:auto}

/* ---------- forms ---------- */
.field{display:grid;gap:7px;margin-bottom:14px}
.field label{font-size:.82rem;font-weight:750;color:var(--muted)}
.input{width:100%;min-height:50px;padding:0 16px;border-radius:14px;
  border:1px solid var(--line2);background:rgba(0,0,0,.25);color:var(--text);
  font-size:.98rem;transition:border-color .16s ease,box-shadow .16s ease}
textarea.input{padding:14px 16px;min-height:110px;resize:vertical;line-height:1.5}
.input::placeholder{color:var(--muted2)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.input-wrap{position:relative}
.input-wrap .input{padding-right:52px}
.input-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;display:grid;place-items:center;border-radius:11px;color:var(--muted)}
.input-eye:hover{color:var(--text);background:var(--surface2)}
.input-eye svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- flash messages ---------- */
.flash{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:14px;
  font-size:.9rem;font-weight:650;line-height:1.45;margin-bottom:16px}
.flash svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.flash.ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:#6ee7b7}
.flash.err{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:#fca5a5}
.flash.info{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.3);color:#c4b5fd}

/* ---------- chips & badges ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;
  font-size:.76rem;font-weight:800;letter-spacing:.02em}
.chip.violet{background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.35);color:#c4b5fd}
.chip.green{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.32);color:#6ee7b7}
.chip.plain{background:var(--surface2);border:1px solid var(--line2);color:var(--muted)}

/* ---------- auth pages ---------- */
.auth{min-height:calc(100vh - 62px);display:grid;place-items:center;padding:28px 18px 48px}
.auth-card{width:min(420px,100%);background:linear-gradient(180deg,rgba(18,26,43,.85),rgba(12,18,30,.92));
  border:1px solid var(--line);border-radius:26px;padding:30px 26px;box-shadow:var(--shadow)}
.auth-card h1{font-size:1.5rem;letter-spacing:-.03em;margin-bottom:4px}
.auth-card .sub{color:var(--muted);font-size:.9rem;line-height:1.5;margin-bottom:22px}
.auth-alt{margin-top:18px;text-align:center;font-size:.88rem;color:var(--muted)}
.auth-alt a{color:#c4b5fd;font-weight:750;text-decoration:none}
.auth-alt a:hover{text-decoration:underline}

/* ---------- section headers ---------- */
.sec-h{display:flex;align-items:baseline;gap:12px;margin:34px 0 16px}
.sec-h h2{font-size:1.3rem;letter-spacing:-.03em}
.sec-h .line{flex:1;height:1px;background:var(--line)}

/* ---------- footer ---------- */
.site-footer{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:34px auto 0;padding:14px 14px max(16px,env(safe-area-inset-bottom));
  color:rgba(255,255,255,.4);font-size:12px;font-weight:700;letter-spacing:-.02em}
.site-footer a{color:rgba(255,255,255,.5);text-decoration:none;transition:color .16s ease}
.site-footer a:hover{color:rgba(255,255,255,.85)}
.site-footer span{opacity:.4}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn,.nav-a{transition:none}
  .btn:hover,.btn-primary:hover{transform:none}
}