/* ============================================================================
   Dunes Store · Panel de cliente (Mi cuenta)
   Acceso premium + shell (sidebar/topbar) + secciones. Bilingüe. Vanilla CSS.
   Usa los tokens del theme (tokens.css): --ds-blu, --ds-ink*, --ds-line, etc.
   ========================================================================== */

/* Colores de estado (pills/anillos) */
.ds-panel, .dsa {
    --st-green:#1E9E62; --st-green-bg:#E7F6EE;
    --st-amber:#B7791F; --st-amber-bg:#FBF3E2;
    --st-red:#C0392B;   --st-red-bg:#FBEAE8;
    --st-slate:#5B6677; --st-slate-bg:#EDF0F5;
    --dsp-track:#E6EBF4;
    --dsp-navy:#0d1b3e;
}

/* ═══════════════════════════ ACCESO ═══════════════════════════ */
.dsa {
    position:relative; overflow:hidden;
    min-height:78vh; display:grid; place-items:center;
    padding:56px 20px; background:linear-gradient(180deg,var(--ds-bg2) 0%,#fff 100%);
}
.dsa__bg { position:absolute; inset:0; pointer-events:none; }
.dsa__bg span {
    position:absolute; border-radius:50%; filter:blur(60px); opacity:.5;
    animation:dsaFloat 14s ease-in-out infinite;
}
.dsa__bg span:nth-child(1){ width:420px;height:420px;left:-80px;top:-60px;background:radial-gradient(circle,rgba(51,81,159,.30),transparent 70%); }
.dsa__bg span:nth-child(2){ width:360px;height:360px;right:-60px;bottom:-40px;background:radial-gradient(circle,rgba(13,27,62,.22),transparent 70%);animation-delay:-5s; }
.dsa__bg span:nth-child(3){ width:280px;height:280px;left:50%;top:60%;background:radial-gradient(circle,rgba(51,81,159,.18),transparent 70%);animation-delay:-9s; }
@keyframes dsaFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-26px)} }

.dsa__wrap {
    position:relative; z-index:1; width:100%; max-width:940px;
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    background:#fff; border:1px solid var(--ds-line); border-radius:24px;
    box-shadow:0 30px 80px rgba(13,27,62,.16); overflow:hidden;
}
.dsa__aside {
    background:linear-gradient(150deg,var(--dsp-navy) 0%,#16285a 55%,var(--ds-blu) 130%);
    color:#fff; padding:42px 38px; display:flex; flex-direction:column; gap:22px;
}
.dsa__brand img { max-height:34px; width:auto; display:block; filter:brightness(0) invert(1); }
.dsa__brand strong { color:#fff; font-size:20px; font-weight:800; }
.dsa__claim { font-size:24px; line-height:1.25; font-weight:800; letter-spacing:-.5px; margin:6px 0 0; }
.dsa__perks { list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
.dsa__perks li { display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.4; color:rgba(255,255,255,.9); }
.dsa__perks svg { flex:none; margin-top:1px; color:#7fd1a6; }
.dsa__trust { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,.7); }

.dsa__panel { padding:42px 40px; display:flex; align-items:center; }
.dsa-card { width:100%; }
.dsa-card__title { font-size:22px; font-weight:800; letter-spacing:-.5px; margin:0 0 6px; }
.dsa-card__lead { font-size:14px; color:var(--ds-ink3); line-height:1.55; margin:0 0 20px; }

.dsa-tabs { display:flex; gap:4px; background:var(--ds-bg2); border-radius:12px; padding:4px; margin:0 0 22px; }
.dsa-tab {
    flex:1; border:0; background:none; cursor:pointer; padding:10px; border-radius:9px;
    font-size:14px; font-weight:700; color:var(--ds-ink3); transition:.18s;
}
.dsa-tab.is-active { background:#fff; color:var(--ds-ink); box-shadow:0 2px 8px rgba(15,23,42,.08); }

.dsa-pane { display:none; flex-direction:column; gap:15px; animation:dsaIn .35s ease; }
.dsa-pane.is-active { display:flex; }
@keyframes dsaIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.dsa-f { display:flex; flex-direction:column; gap:7px; }
.dsa-f > span { font-size:13px; font-weight:600; color:var(--ds-ink2); }
.dsa-f input, .dsa-f textarea, .dsa-f select {
    width:100%; border:1px solid var(--ds-line); border-radius:11px; padding:12px 14px;
    font-size:14px; font-family:inherit; color:var(--ds-ink); background:#fff; transition:.16s;
}
.dsa-f textarea { resize:vertical; min-height:96px; }
.dsa-f input:focus, .dsa-f textarea:focus, .dsa-f select:focus {
    outline:0; border-color:var(--ds-blu); box-shadow:0 0 0 4px var(--ds-blu-soft);
}
.dsa-hint { font-size:11.5px; color:var(--ds-ink4); }
.dsa-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dsa-check { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ds-ink2); cursor:pointer; }
.dsa-check input { width:16px; height:16px; accent-color:var(--ds-blu); }
.dsa-link { font-size:13px; font-weight:600; color:var(--ds-blu); }
.dsa-submit { width:100%; justify-content:center; margin-top:4px; }
.dsa-fine { font-size:11.5px; color:var(--ds-ink4); text-align:center; margin:2px 0 0; }
.dsa-back { text-align:center; margin:16px 0 0; }
.dsa-alert { border-radius:11px; padding:11px 14px; font-size:13px; font-weight:600; margin:0 0 16px; }
.dsa-alert.is-err { background:var(--st-red-bg); color:var(--st-red); }
.dsa-alert.is-ok { background:var(--st-green-bg); color:var(--st-green); }

/* ═══════════════════════════ SHELL ═══════════════════════════ */
.ds-panel {
    max-width:1240px; margin:28px auto 56px; padding:0 20px;
    display:grid; grid-template-columns:268px 1fr; gap:26px; align-items:start;
}

.dsp-mtoggle { display:none; }
.dsp-scrim { display:none; }

/* Sidebar */
.dsp-side {
    position:sticky; top:88px; align-self:start;
    background:#fff; border:1px solid var(--ds-line); border-radius:20px;
    padding:20px 16px; display:flex; flex-direction:column; gap:18px;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
}
.dsp-side__brand img { max-height:30px; width:auto; display:block; }
.dsp-side__brand strong { font-size:18px; font-weight:800; color:var(--ds-ink); }

.dsp-user { display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:var(--ds-bg2); }
.dsp-user__av {
    flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
    color:#fff; font-weight:800; font-size:17px;
    box-shadow:0 4px 12px rgba(15,23,42,.18);
}
.dsp-user__av--lg { width:56px; height:56px; font-size:22px; }
.dsp-user__meta { display:flex; flex-direction:column; min-width:0; }
.dsp-user__meta strong { font-size:14px; color:var(--ds-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dsp-user__meta small { font-size:11.5px; color:var(--ds-ink4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.dsp-nav { display:flex; flex-direction:column; gap:3px; }
.dsp-nav__item {
    position:relative; display:flex; align-items:center; gap:12px; padding:11px 13px;
    border-radius:12px; font-size:14px; font-weight:600; color:var(--ds-ink2); transition:.16s;
}
.dsp-nav__item:hover { background:var(--ds-bg2); color:var(--ds-ink); }
.dsp-nav__item.is-active { background:var(--ds-blu-soft); color:var(--ds-blu); font-weight:700; }
.dsp-nav__ic { display:inline-flex; }
.dsp-nav__ic svg { width:19px; height:19px; }
.dsp-nav__lb { flex:1; }
.dsp-nav__badge {
    min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--st-red);
    color:#fff; font-size:11px; font-weight:800; display:inline-grid; place-items:center;
}
.dsp-side__foot { display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--ds-line); padding-top:16px; }
.dsp-side__foot .ds-lang { align-self:flex-start; }
.dsp-logout { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ds-ink3); }
.dsp-logout:hover { color:var(--st-red); }

/* Main */
.dsp-main { min-width:0; }
.dsp-top { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 22px; }
.dsp-top__crumb { font-size:12px; font-weight:600; letter-spacing:.3px; color:var(--ds-ink4); text-transform:uppercase; }
.dsp-top__title { font-size:30px; font-weight:900; letter-spacing:-1px; margin:6px 0 0; }

/* ── Cards ── */
.dsp-card {
    background:#fff; border:1px solid var(--ds-line); border-radius:20px; padding:22px;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
}
.dsp-card__h { font-size:16px; font-weight:800; letter-spacing:-.3px; margin:0 0 16px; }
.dsp-card__h2 { font-size:14px; font-weight:800; margin:0 0 12px; }
.dsp-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.dsp-muted { font-size:13.5px; color:var(--ds-ink4); }

/* ── Hello hero ── */
.dsp-hello {
    position:relative; overflow:hidden; border-radius:22px; padding:34px 32px; margin:0 0 22px;
    background:linear-gradient(125deg,var(--dsp-navy) 0%,#16285a 55%,var(--ds-blu) 135%); color:#fff;
}
.dsp-hello__hi { font-size:27px; font-weight:900; letter-spacing:-.8px; display:block; }
.dsp-hello__txt p { margin:8px 0 0; font-size:14.5px; color:rgba(255,255,255,.82); max-width:520px; }
.dsp-hello__glow { position:absolute; right:-60px; top:-80px; width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%); pointer-events:none; }

/* ── Stats ── */
.dsp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0 0 22px; }
.dsp-stat {
    background:#fff; border:1px solid var(--ds-line); border-radius:18px; padding:18px;
    display:flex; flex-direction:column; gap:6px; transition:transform .18s, box-shadow .18s;
    box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.dsp-stat:hover { transform:translateY(-3px); box-shadow:0 16px 34px rgba(15,23,42,.10); }
.dsp-stat__ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:4px; }
.dsp-stat__ic svg { width:21px; height:21px; }
.dsp-stat__v { font-size:30px; font-weight:900; letter-spacing:-1px; line-height:1; color:var(--ds-ink); }
.dsp-stat__l { font-size:12.5px; color:var(--ds-ink4); font-weight:600; }
.dsp-stat--blue  .dsp-stat__ic { background:var(--ds-blu-soft); color:var(--ds-blu); }
.dsp-stat--amber .dsp-stat__ic { background:var(--st-amber-bg); color:var(--st-amber); }
.dsp-stat--slate .dsp-stat__ic { background:var(--st-slate-bg); color:var(--st-slate); }
.dsp-stat--green .dsp-stat__ic { background:var(--st-green-bg); color:var(--st-green); }

/* ── Spotlight (licencia destacada) ── */
.dsp-spot { display:flex; gap:24px; align-items:center; }
.dsp-spot__ring {
    flex:none; width:128px; height:128px; border-radius:50%;
    background:conic-gradient(var(--ds-blu) calc(var(--p,100)*1%), var(--dsp-track) 0);
    display:grid; place-items:center; transition:--p 1s;
}
.dsp-spot__ringin { width:100px; height:100px; border-radius:50%; background:#fff; display:grid; place-items:center; text-align:center; box-shadow:inset 0 0 0 1px rgba(15,23,42,.05); }
.dsp-spot__ringin strong { font-size:30px; font-weight:900; letter-spacing:-1px; color:var(--ds-ink); line-height:1; }
.dsp-spot__ringin small { display:block; font-size:11px; color:var(--ds-ink4); font-weight:600; margin-top:2px; }
.dsp-spot__body { flex:1; min-width:0; }
.dsp-spot__body h3 { font-size:18px; font-weight:800; letter-spacing:-.3px; margin:8px 0 4px; }
.dsp-spot__exp { font-size:13px; color:var(--ds-ink3); margin:0 0 12px; }
.dsp-spot__acts { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* ── Key row ── */
.dsp-keyrow { display:flex; align-items:center; gap:8px; background:var(--ds-bg2); border:1px solid var(--ds-line); border-radius:11px; padding:8px 10px; }
.dsp-key { flex:1; font-family:ui-monospace,Menlo,monospace; font-size:13px; color:var(--dsp-navy); word-break:break-all; }
.dsp-key__reveal { border:0; background:none; cursor:pointer; font-size:12px; font-weight:700; color:var(--ds-blu); white-space:nowrap; padding:4px 6px; }
.dsp-key__copy { flex:none; border:1px solid var(--ds-line); background:#fff; border-radius:8px; width:32px; height:32px; display:grid; place-items:center; cursor:pointer; color:var(--ds-ink3); transition:.16s; }
.dsp-key__copy svg { width:16px; height:16px; }
.dsp-key__copy:hover { color:var(--ds-blu); border-color:var(--ds-blu); }
.dsp-key__copy.is-done { color:var(--st-green); border-color:var(--st-green); }

/* ── Quick actions ── */
.dsp-quick__grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dsp-quick__grid a {
    display:flex; flex-direction:column; gap:10px; padding:16px; border:1px solid var(--ds-line);
    border-radius:14px; font-size:13.5px; font-weight:700; color:var(--ds-ink2); transition:.16s;
}
.dsp-quick__grid a span { width:38px; height:38px; border-radius:11px; background:var(--ds-blu-soft); color:var(--ds-blu); display:grid; place-items:center; }
.dsp-quick__grid a span svg { width:19px; height:19px; }
.dsp-quick__grid a:hover { border-color:var(--ds-blu); transform:translateY(-2px); box-shadow:0 10px 24px rgba(51,81,159,.12); }

/* ── Pills ── */
.dsp-pill { display:inline-flex; align-items:center; font-size:11.5px; font-weight:800; letter-spacing:.2px; padding:4px 11px; border-radius:999px; text-transform:uppercase; }
.dsp-pill--active,  .dsp-pill--answered { background:var(--st-green-bg); color:var(--st-green); }
.dsp-pill--expiring, .dsp-pill--open { background:var(--st-amber-bg); color:var(--st-amber); }
.dsp-pill--expired { background:var(--st-red-bg); color:var(--st-red); }
.dsp-pill--refunded, .dsp-pill--closed { background:var(--st-slate-bg); color:var(--st-slate); }

/* ── Licencias ── */
.dsp-lics { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.dsp-lic { display:flex; flex-direction:column; gap:14px; transition:transform .18s, box-shadow .18s; }
.dsp-lic:hover { transform:translateY(-3px); box-shadow:0 18px 38px rgba(15,23,42,.10); }
.dsp-lic__head { display:flex; align-items:center; gap:14px; }
.dsp-lic__ring { flex:none; width:46px; height:46px; border-radius:50%; position:relative; background:conic-gradient(var(--ds-blu) calc(var(--p,100)*1%), var(--dsp-track) 0); }
.dsp-lic__ring i { position:absolute; inset:5px; border-radius:50%; background:#fff; }
.dsp-lic__id { flex:1; display:flex; flex-direction:column; gap:6px; }
.dsp-lic__id strong { font-size:15px; font-weight:800; letter-spacing:-.3px; }
.dsp-lic__id .dsp-pill { align-self:flex-start; }
.dsp-lic__sub { color:var(--ds-blu); display:inline-flex; }
.dsp-lic__sub svg { width:18px; height:18px; }
.dsp-lic__meta { font-size:13px; color:var(--ds-ink3); }
.dsp-lic__acts { display:flex; gap:8px; flex-wrap:wrap; }
.dsp-lic__acts .ds-btn svg { width:15px; height:15px; }

/* ── Multi-sitio: sitios donde se usa la licencia ── */
.dsp-sites { border-top:1px solid var(--ds-line); padding-top:13px; }
.dsp-sites__head { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ds-ink); }
.dsp-sites__ic { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; background:var(--ds-blu-soft); color:var(--ds-blu); flex:none; }
.dsp-sites__ic svg { width:15px; height:15px; }
.dsp-sites__head strong { font-size:13px; font-weight:650; }
.dsp-sites__count { margin-left:auto; font-size:12.5px; color:var(--ds-ink3); font-variant-numeric:tabular-nums; }
.dsp-sites__count.is-over { color:#b4530a; font-weight:600; }
.dsp-sites__none { font-size:12.5px; color:var(--ds-ink3); margin:10px 0 0; }
.dsp-sites__list { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.dsp-site { display:flex; align-items:center; gap:10px; background:var(--ds-surface2,#f6f8fc); border:1px solid var(--ds-line); border-radius:9px; padding:8px 11px; }
.dsp-site.is-beyond { background:#fff6ee; border-color:#f3d9bf; }
.dsp-site__name { font-size:13px; font-weight:550; color:var(--ds-ink); word-break:break-all; }
.dsp-site__tag { font-style:normal; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:#b4530a; background:#fbe6d2; padding:1px 6px; border-radius:5px; margin-left:6px; }
.dsp-site__seen { margin-left:auto; font-size:11.5px; color:var(--ds-ink3); white-space:nowrap; }
.dsp-site__free { margin:0; flex:none; }
.dsp-site__btn { background:none; border:1px solid var(--ds-line); color:var(--ds-ink3); font-size:11.5px; padding:4px 9px; border-radius:7px; cursor:pointer; transition:.15s; }
.dsp-site__btn:hover { border-color:var(--ds-blu); color:var(--ds-blu); background:var(--ds-blu-soft); }

/* ── Tabla (facturas) ── */
.dsp-table-card { padding:8px; }
.dsp-table { width:100%; border-collapse:collapse; }
.dsp-table th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--ds-ink4); font-weight:700; padding:14px 16px; border-bottom:1px solid var(--ds-line); }
.dsp-table td { padding:14px 16px; font-size:14px; color:var(--ds-ink2); border-bottom:1px solid var(--ds-line); }
.dsp-table tbody tr:last-child td { border-bottom:0; }
.dsp-table tbody tr:hover { background:var(--ds-bg2); }
.dsp-table .ar { text-align:right; }
.dsp-tlink { font-weight:700; color:var(--ds-blu); }

/* ── Timeline (compras) ── */
.dsp-timeline { display:flex; flex-direction:column; gap:0; position:relative; }
.dsp-tl { display:flex; gap:16px; padding:0 0 22px; position:relative; }
.dsp-tl:not(:last-child)::before { content:""; position:absolute; left:21px; top:44px; bottom:0; width:2px; background:var(--ds-line); }
.dsp-tl__dot { flex:none; width:44px; height:44px; border-radius:50%; background:var(--ds-blu-soft); color:var(--ds-blu); display:grid; place-items:center; z-index:1; }
.dsp-tl__dot svg { width:20px; height:20px; }
.dsp-tl__body { flex:1; background:#fff; border:1px solid var(--ds-line); border-radius:14px; padding:14px 16px; box-shadow:0 6px 18px rgba(15,23,42,.04); }
.dsp-tl__top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dsp-tl__top strong { font-size:14.5px; font-weight:800; }
.dsp-tl__amt { font-size:15px; font-weight:900; color:var(--ds-blu); letter-spacing:-.3px; }
.dsp-tl__meta { font-size:12.5px; color:var(--ds-ink4); margin-top:5px; }

/* ── Soporte ── */
.dsp-grid2--support { grid-template-columns:1fr 1.1fr; }
.dsp-newticket form { display:flex; flex-direction:column; gap:14px; }
.dsp-ticketlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.dsp-ticketlist a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; border:1px solid var(--ds-line); border-radius:13px; transition:.16s; }
.dsp-ticketlist a:hover { border-color:var(--ds-blu); background:var(--ds-bg2); }
.dsp-ticketlist a.is-unread { border-left:3px solid var(--ds-blu); }
.dsp-tk__subj { font-size:14px; font-weight:700; color:var(--ds-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dsp-tk__meta { display:flex; align-items:center; gap:10px; flex:none; }
.dsp-tk__meta small { font-size:11.5px; color:var(--ds-ink4); }

.dsp-thread { background:#fff; border:1px solid var(--ds-line); border-radius:20px; padding:22px; box-shadow:0 10px 30px rgba(15,23,42,.05); }
.dsp-thread__bar { display:flex; align-items:center; justify-content:space-between; margin:0 0 14px; }
.dsp-back { font-size:13.5px; font-weight:700; color:var(--ds-blu); }
.dsp-thread__subj { font-size:20px; font-weight:800; letter-spacing:-.4px; margin:0 0 18px; }
.dsp-chat { display:flex; flex-direction:column; gap:14px; margin:0 0 18px; }
.dsp-bubble { max-width:82%; }
.dsp-bubble.is-me { align-self:flex-end; }
.dsp-bubble.is-staff { align-self:flex-start; }
.dsp-bubble__who { font-size:11.5px; color:var(--ds-ink4); font-weight:600; margin:0 0 5px; padding:0 4px; }
.dsp-bubble.is-me .dsp-bubble__who { text-align:right; }
.dsp-bubble__txt { padding:12px 16px; border-radius:16px; font-size:14px; line-height:1.55; }
.dsp-bubble.is-me .dsp-bubble__txt { background:var(--ds-blu); color:#fff; border-bottom-right-radius:5px; }
.dsp-bubble.is-staff .dsp-bubble__txt { background:var(--ds-bg2); color:var(--ds-ink); border:1px solid var(--ds-line); border-bottom-left-radius:5px; }
.dsp-bubble__txt p { margin:0 0 8px; } .dsp-bubble__txt p:last-child { margin:0; }
.dsp-reply { display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--ds-line); padding-top:16px; }
.dsp-reply textarea { width:100%; border:1px solid var(--ds-line); border-radius:13px; padding:12px 14px; font-size:14px; font-family:inherit; resize:vertical; min-height:84px; }
.dsp-reply textarea:focus { outline:0; border-color:var(--ds-blu); box-shadow:0 0 0 4px var(--ds-blu-soft); }
.dsp-reply .ds-btn { align-self:flex-end; }
.dsp-closed { text-align:center; padding:14px; }

/* ── Perfil ── */
.dsp-profile form { display:flex; flex-direction:column; gap:15px; }
.dsp-profile__id { display:flex; align-items:center; gap:14px; margin:0 0 18px; }
.dsp-profile__id strong { display:block; font-size:16px; font-weight:800; }
.dsp-profile__id small { font-size:12.5px; color:var(--ds-ink4); }
.dsp-2col { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dsp-sep { border:0; border-top:1px solid var(--ds-line); margin:6px 0; }
.dsp-seclist { list-style:none; margin:0 0 16px; padding:0; }
.dsp-seclist li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--ds-line); font-size:13.5px; }
.dsp-seclist li span { color:var(--ds-ink4); }
.dsp-seclist li strong { color:var(--ds-ink); }

/* ── Comprar ── */
.dsp-buy { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.dsp-prod { display:flex; flex-direction:column; gap:8px; transition:transform .18s, box-shadow .18s; }
.dsp-prod:hover { transform:translateY(-3px); box-shadow:0 18px 38px rgba(15,23,42,.10); }
.dsp-prod__ic { width:46px; height:46px; border-radius:13px; background:var(--ds-blu-soft); color:var(--ds-blu); display:grid; place-items:center; margin-bottom:6px; }
.dsp-prod__ic svg { width:22px; height:22px; }
.dsp-prod h3 { font-size:17px; font-weight:800; margin:0; }
.dsp-prod p { font-size:13.5px; color:var(--ds-ink3); line-height:1.5; margin:0 0 6px; flex:1; }
.dsp-prod.is-soon { opacity:.86; }
.dsp-prod__soon { display:inline-block; align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--ds-ink4); background:var(--ds-bg2); border-radius:999px; padding:6px 13px; }

/* ── FAQ ── */
.dsp-faq { display:flex; flex-direction:column; gap:10px; }
.dsp-faq__item { background:#fff; border:1px solid var(--ds-line); border-radius:14px; padding:0 18px; }
.dsp-faq__item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 0; font-size:15px; font-weight:700; color:var(--ds-ink); }
.dsp-faq__item summary::-webkit-details-marker { display:none; }
.dsp-faq__plus { flex:none; position:relative; width:18px; height:18px; }
.dsp-faq__plus::before, .dsp-faq__plus::after { content:""; position:absolute; background:var(--ds-blu); border-radius:2px; transition:.2s; }
.dsp-faq__plus::before { left:0; top:8px; width:18px; height:2px; }
.dsp-faq__plus::after { left:8px; top:0; width:2px; height:18px; }
.dsp-faq__item[open] .dsp-faq__plus::after { transform:rotate(90deg); opacity:0; }
.dsp-faq__a { font-size:14px; line-height:1.65; color:var(--ds-ink3); padding:0 0 18px; }

/* ── Estado vacío ── */
.dsp-empty { text-align:center; padding:42px 26px; }
.dsp-empty__ic { width:62px; height:62px; border-radius:18px; background:var(--ds-blu-soft); color:var(--ds-blu); display:grid; place-items:center; margin:0 auto 16px; }
.dsp-empty__ic svg { width:28px; height:28px; }
.dsp-empty h3 { font-size:18px; font-weight:800; margin:0 0 6px; }
.dsp-empty p { font-size:14px; color:var(--ds-ink3); max-width:380px; margin:0 auto 18px; line-height:1.55; }

/* ── Toast ── */
.dsp-toast {
    position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:9999;
    display:flex; align-items:center; gap:10px; background:var(--dsp-navy); color:#fff;
    padding:13px 20px; border-radius:13px; box-shadow:0 18px 44px rgba(13,27,62,.34);
    font-size:14px; font-weight:600; opacity:0; visibility:hidden; transition:.32s; max-width:90vw;
}
.dsp-toast.is-show { opacity:1; visibility:visible; transform:translate(-50%,0); }
.dsp-toast__ic { display:inline-flex; } .dsp-toast__ic svg { width:18px; height:18px; }

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width:980px) {
    .dsp-stats { grid-template-columns:1fr 1fr; }
    .dsp-grid2, .dsp-grid2--support { grid-template-columns:1fr; }
    .dsp-lics, .dsp-buy { grid-template-columns:1fr; }
}
@media (max-width:860px) {
    .dsa__wrap { grid-template-columns:1fr; max-width:460px; }
    .dsa__aside { display:none; }
    .dsa__panel { padding:32px 26px; }

    .ds-panel { grid-template-columns:1fr; padding:0 16px; margin-top:16px; }
    .dsp-mtoggle {
        display:inline-flex; align-items:center; gap:8px; margin:0 0 14px;
        background:#fff; border:1px solid var(--ds-line); border-radius:12px;
        padding:11px 15px; font-size:14px; font-weight:700; color:var(--ds-ink); cursor:pointer;
        box-shadow:0 6px 18px rgba(15,23,42,.06);
    }
    .dsp-side {
        position:fixed; top:0; left:0; z-index:1001; height:100dvh; width:min(82vw,300px);
        border-radius:0 18px 18px 0; transform:translateX(-104%); transition:transform .38s cubic-bezier(.22,1,.36,1);
        overflow-y:auto;
    }
    .dsp-side.is-open { transform:translateX(0); }
    .dsp-scrim { display:block; position:fixed; inset:0; z-index:1000; background:rgba(13,27,62,.42); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:.34s; }
    .dsp-scrim.is-open { opacity:1; visibility:visible; }
    body.ds-nav-open { overflow:hidden; }

    .dsp-top__title { font-size:24px; }
    .dsp-spot { flex-direction:column; text-align:center; }
    .dsp-spot__body .dsp-pill, .dsp-spot__acts { justify-content:center; }
}
@media (max-width:480px) {
    .dsp-stats { grid-template-columns:1fr; }
    .dsp-quick__grid { grid-template-columns:1fr; }
    .dsp-2col { grid-template-columns:1fr; }
    .dsp-top { flex-direction:column; align-items:flex-start; gap:12px; }
}

/* ════════════════════════════ Afiliados ══════════════════════════ */
/* Estado de comisión (extiende los pills existentes) */
.dsp-pill--pending  { background:var(--st-amber-bg); color:var(--st-amber); }
.dsp-pill--approved { background:var(--ds-blu-soft); color:var(--ds-blu); }
.dsp-pill--paid     { background:var(--st-green-bg); color:var(--st-green); }

/* Clave / enlace a ancho completo (enlace de referido largo) */
.dsp-key--full { font-size:12.5px; }

/* Invitación a unirse */
.dsp-affjoin { text-align:center; max-width:600px; margin:0 auto; }
.dsp-afflogo { margin:6px auto 18px; display:flex; justify-content:center; }
.dsp-afflogo--sm { margin:0 0 12px; justify-content:flex-start; }
.dsp-afflogo__img { height:64px; width:auto; max-width:100%; object-fit:contain; object-position:center; display:block; image-rendering:auto; }
.dsp-afflogo--sm .dsp-afflogo__img { height:40px; }
.dsp-affjoin h3 { font-size:23px; margin:0 0 8px; letter-spacing:-.4px; }
.dsp-affjoin__lead { color:var(--ds-ink3); font-size:15px; line-height:1.6; margin:0 auto 22px; max-width:480px; }
.dsp-affjoin__perks { list-style:none; margin:0 0 24px; padding:0; display:grid; gap:12px; text-align:left; max-width:420px; margin-inline:auto; }
.dsp-affjoin__perks li { display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:500; color:var(--ds-ink); }
.dsp-affjoin__perks li span {
    width:38px; height:38px; flex:0 0 38px; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    background:var(--ds-blu-soft); color:var(--ds-blu);
}
.dsp-affjoin__perks li span svg { width:19px; height:19px; }
.dsp-fine { color:var(--ds-ink3); font-size:12px; margin:14px 0 0; }

/* Cabecera del panel activo */
.dsp-affhead { margin-bottom:18px; }
.dsp-affhead__txt h2 { font-size:26px; margin:10px 0 6px; letter-spacing:-.5px;
    background:linear-gradient(120deg,var(--ds-blu),#6E91E6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.dsp-affhead__txt p { color:var(--ds-ink3); font-size:14.5px; margin:0; }

/* Tarjeta del enlace */
.dsp-afflink__code { margin-top:12px; font-size:13px; color:var(--ds-ink3); }
.dsp-afflink__code strong { color:var(--ds-blu); font-family:ui-monospace,Menlo,monospace; }

/* Cómo funciona */
.dsp-affhow__steps { margin:6px 0 10px; padding-left:20px; display:grid; gap:9px; }
.dsp-affhow__steps li { font-size:14px; line-height:1.55; color:var(--dsp-navy); }

/* Tabla de comisiones vacía */
.dsp-affrefs__empty { padding:14px 2px 4px; }

/* ── Banner del portal de facturación de Stripe (Mi cuenta · licencias) ── */
.dsp-billing { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.dsp-billing__txt { display:flex; align-items:center; gap:13px; }
.dsp-billing__ic { flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--ds-blu-soft); color:var(--ds-blu); }
.dsp-billing__ic svg { width:20px; height:20px; }
.dsp-billing__txt strong { display:block; font-size:14.5px; color:var(--ds-ink); }
.dsp-billing__txt small { display:block; font-size:12.5px; color:var(--ds-ink3); margin-top:2px; }

/* ── Mis webs (Dunes Web · proyectos a medida) ── */
.dsp-webs { display:flex; flex-direction:column; gap:18px; }
.dsp-web { padding:0; overflow:hidden; }
.dsp-web__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--ds-line); }
.dsp-web__id { display:flex; align-items:center; gap:12px; min-width:0; }
.dsp-web__ic { width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--ds-blu-soft); color:var(--ds-blu); }
.dsp-web__ic svg { width:21px; height:21px; }
.dsp-web__id strong { display:block; font-size:15px; color:var(--ds-ink); }
.dsp-web__id small { font-size:12px; color:var(--ds-ink4); }

.dsp-steps { display:flex; list-style:none; margin:0; padding:22px 20px 18px; gap:0; }
.dsp-step { flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; }
.dsp-step::before { content:""; position:absolute; top:9px; left:-50%; width:100%; height:2px; background:var(--ds-line); z-index:0; }
.dsp-step:first-child::before { display:none; }
.dsp-step.is-done::before, .dsp-step.is-now::before { background:var(--ds-blu); }
.dsp-step__dot { position:relative; z-index:1; width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--ds-line); }
.dsp-step.is-done .dsp-step__dot { background:var(--ds-blu); border-color:var(--ds-blu); }
.dsp-step.is-now .dsp-step__dot { border-color:var(--ds-blu); box-shadow:0 0 0 4px var(--ds-blu-soft); }
.dsp-step__lb { font-size:11.5px; font-weight:600; color:var(--ds-ink4); }
.dsp-step.is-done .dsp-step__lb, .dsp-step.is-now .dsp-step__lb { color:var(--ds-ink2); }

.dsp-web__lic { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 20px; padding:14px; border-radius:14px; background:var(--ds-bg2); }
.dsp-web__licic { width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:#fff; border:1px solid var(--ds-line); color:var(--ds-blu); }
.dsp-web__licic svg { width:17px; height:17px; }
.dsp-web__licbody { flex:1; min-width:200px; }
.dsp-web__licbody strong { display:block; font-size:13px; color:var(--ds-ink2); margin-bottom:7px; }
.dsp-web__licacts { display:flex; gap:8px; flex-wrap:wrap; }

.dsp-web__brief { padding:18px 20px 22px; }
.dsp-web__brief .dsp-card__h { margin:0 0 4px; }
.dsp-briefform { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.dsp-briefform .dsa-f--wide { grid-column:1 / -1; }
.dsp-briefform > button { grid-column:1 / -1; justify-self:start; }
.dsp-brieflist { margin:14px 0 0; }
.dsp-briefrow { display:grid; grid-template-columns:210px 1fr; gap:12px; padding:11px 0; border-top:1px solid var(--ds-line); }
.dsp-briefrow:first-child { border-top:0; }
.dsp-briefrow dt { font-size:13px; font-weight:600; color:var(--ds-ink3); margin:0; }
.dsp-briefrow dd { font-size:14px; color:var(--ds-ink); margin:0; line-height:1.55; }
@media (max-width:680px) {
    .dsp-briefform { grid-template-columns:1fr; }
    .dsp-briefrow { grid-template-columns:1fr; gap:3px; }
    .dsp-step__lb { font-size:10px; }
}