/* viperptt.com · shell.css — la carcasa: navbar pública, pie, panel/admin con
 * navbar fija + sidebar, y las pantallas de entrar/registro.
 * Móvil primero: <1024 px la sidebar es un cajón; <720 px la navbar pública es un menú. */

.vp-skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--vp-ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;transition:top .15s}
.vp-skip:focus{top:12px;color:#fff}

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.vp-logo{display:inline-flex;align-items:center;gap:10px;color:var(--vp-ink)}
.vp-logo img{width:36px;height:36px;border-radius:10px}
.vp-logo__txt{display:grid;line-height:1.05}
.vp-logo__txt b{font-size:1.28rem;font-weight:800;letter-spacing:-.035em;white-space:nowrap}
.vp-logo__txt small{font-size:.66rem;color:var(--vp-muted);font-weight:600;letter-spacing:.02em}

/* ── Selector idioma / moneda ─────────────────────────────────────────────── */
.vp-prefs{display:inline-flex;gap:8px;align-items:center}
.vp-seg--mini{padding:3px}
.vp-seg--mini a{padding:5px 10px;font-size:.78rem;border-radius:8px;color:var(--vp-muted);font-weight:700}
.vp-seg--mini a:hover{color:var(--vp-ink)}
.vp-seg--mini a.is-on{background:#fff;color:var(--vp-primary);box-shadow:var(--vp-sh-1)}

/* ── Navbar pública (fija) ────────────────────────────────────────────────── */
.vp-nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--vp-nav-h);background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--vp-line2);
  transition:box-shadow .2s}
.vp-nav.is-scrolled{box-shadow:0 6px 24px -14px rgba(10,26,58,.35)}
.vp-nav__in{height:100%;display:flex;align-items:center;gap:20px}
.vp-nav__links{display:flex;align-items:center;gap:2px;margin-inline:auto}
.vp-nav__links>a{padding:9px 13px;border-radius:10px;font-weight:600;font-size:.93rem;color:var(--vp-ink)}
.vp-nav__links>a:hover{background:var(--vp-p50);color:var(--vp-primary)}
.vp-nav__links>a.is-on{color:var(--vp-primary);background:var(--vp-p50)}
.vp-nav__end{display:flex;align-items:center;gap:10px}
.vp-nav__mobile{display:none}
.vp-nav__burger{display:none;width:44px;height:44px;border:0;border-radius:12px;background:var(--vp-p50);color:var(--vp-ink);place-items:center}
.vp-nav__burger .vp-ico{width:22px;height:22px}
.vp-nav__burger .vp-ico:last-child{display:none}
.vp-nav__burger[aria-expanded=true] .vp-ico:first-child{display:none}
.vp-nav__burger[aria-expanded=true] .vp-ico:last-child{display:block}
.vp-pub main{padding-top:var(--vp-nav-h)}
@media (max-width:1060px){
  .vp-nav__prefs{display:none}
  .vp-nav__login{display:none}
}
@media (max-width:860px){
  .vp-nav__burger{display:grid}
  .vp-nav__cta{display:none}
  .vp-nav__end{margin-left:auto}
  .vp-nav__links{position:fixed;inset:var(--vp-nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:4px;padding:14px var(--vp-gut) 22px;
    background:#fff;border-bottom:1px solid var(--vp-line);box-shadow:0 24px 40px -20px rgba(10,26,58,.4);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:.18s;margin:0;max-height:calc(100dvh - var(--vp-nav-h));overflow:auto}
  .vp-nav__links.is-open{transform:none;opacity:1;visibility:visible}
  .vp-nav__links>a{padding:14px 12px;font-size:1.02rem}
  .vp-nav__mobile{display:grid;gap:10px;padding-top:12px;margin-top:8px;border-top:1px solid var(--vp-line2)}
  .vp-nav__mobile .vp-prefs{justify-content:space-between}
}

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.vp-foot{background:#fff;border-top:1px solid var(--vp-line);padding-top:48px;margin-top:0}
.vp-foot__grid{display:grid;gap:32px;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;padding-bottom:36px}
.vp-foot__brand{display:grid;gap:14px;align-content:start;max-width:320px}
.vp-foot h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--vp-muted);margin-bottom:12px}
.vp-foot li{margin-bottom:8px}
.vp-foot li a{color:var(--vp-ink);font-weight:500;font-size:.94rem}
.vp-foot li a:hover{color:var(--vp-primary)}
.vp-foot__bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:18px;border-top:1px solid var(--vp-line2)}
@media (max-width:1000px){.vp-foot__grid{grid-template-columns:1fr 1fr 1fr}.vp-foot__brand{grid-column:1/-1;max-width:none}}
@media (max-width:640px){.vp-foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.vp-foot__grid{grid-template-columns:1fr}}

/* ── Panel y admin: navbar fija + sidebar ─────────────────────────────────── */
.vp-app{--vp-main-pad:clamp(16px,3vw,32px)}
.vp-top{position:fixed;inset:0 0 auto 0;z-index:90;height:var(--vp-nav-h);display:flex;align-items:center;gap:12px;
  padding:0 var(--vp-gut) 0 calc(var(--vp-side-w) + var(--vp-gut));background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--vp-line2)}
.vp-top__burger{display:none;width:44px;height:44px;border:0;border-radius:12px;background:var(--vp-p50);place-items:center}
.vp-top__burger .vp-ico{width:22px;height:22px}
.vp-top__logo{display:none}
.vp-top__tag{display:none}
.vp-top__wallet{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;background:var(--vp-p50);border:1px solid var(--vp-p100);color:var(--vp-p700);font-weight:700;font-size:.9rem}
.vp-top__wallet:hover{background:var(--vp-p100);color:var(--vp-p700)}
.vp-top__user{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:99px;border:1px solid var(--vp-line);background:#fff;font-weight:650;font-size:.9rem}
.vp-top__user:hover{border-color:var(--vp-p200)}
.vp-top__user .vp-ico{width:16px;height:16px;color:var(--vp-muted)}
.vp-menu{position:relative}
.vp-menu__pop{position:absolute;right:0;top:calc(100% + 8px);min-width:250px;background:#fff;border:1px solid var(--vp-line);border-radius:var(--vp-r-l);box-shadow:var(--vp-sh-2);padding:8px;display:grid;gap:2px;z-index:5}
.vp-menu__pop[hidden]{display:none}
.vp-menu__who{padding:10px 12px 12px;display:grid;border-bottom:1px solid var(--vp-line2);margin-bottom:4px}
.vp-menu__pop a,.vp-menu__pop button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:10px;border:0;background:none;color:var(--vp-ink);font-weight:600;font-size:.92rem;text-align:left}
.vp-menu__pop a:hover,.vp-menu__pop button:hover{background:var(--vp-p50);color:var(--vp-primary)}
.vp-menu__pop .vp-ico{color:var(--vp-muted)}

.vp-side{position:fixed;z-index:95;left:0;top:0;bottom:0;width:var(--vp-side-w);background:#fff;border-right:1px solid var(--vp-line2);
  display:flex;flex-direction:column;padding:0 14px 16px;overflow-y:auto;overscroll-behavior:contain}
.vp-side__logo{height:var(--vp-nav-h);display:flex;align-items:center;justify-content:space-between;flex:none}
.vp-side__x{display:none;width:40px;height:40px;border:0;border-radius:10px;background:var(--vp-p50)}
.vp-side__nav{display:grid;gap:3px;padding-top:6px}
.vp-side__group{font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--vp-soft);padding:18px 12px 6px}
.vp-side__nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--vp-ink);font-weight:600;font-size:.94rem}
.vp-side__nav a .vp-ico{color:var(--vp-soft);width:1.3em;height:1.3em}
.vp-side__nav a:hover{background:var(--vp-p50);color:var(--vp-p700)}
.vp-side__nav a.is-on{background:var(--vp-primary);color:#fff;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--vp-primary) 80%,transparent)}
.vp-side__nav a.is-on .vp-ico{color:#fff}
/* Lo de abajo del menú: la ayuda a la mano y el plan. Se pega al fondo y, si la ventana es baja y el menú se desplaza, se queda a la vista (sticky). */
.vp-side__pie{margin-top:auto;margin-bottom:-16px;position:sticky;bottom:0;z-index:1;display:grid;gap:10px;padding:14px 0 16px;background:#fff}
.vp-side__ayuda{display:grid;gap:8px;padding:14px;border-radius:var(--vp-r-l);background:linear-gradient(180deg,#fff,var(--vp-p50));border:1px solid var(--vp-line)}
.vp-side__ayuda h2{display:flex;align-items:center;gap:8px;font-size:.98rem;letter-spacing:-.01em;line-height:1.2}
.vp-side__ayuda h2 .vp-ico{color:var(--vp-primary);width:1.25em;height:1.25em;flex:none}
.vp-side__ayuda p{font-size:.82rem;line-height:1.4;color:var(--vp-muted)}
@media (max-height:760px){.vp-side__ayuda p{display:none}}
.vp-side__plan{display:grid;gap:3px;padding:14px;border-radius:var(--vp-r-l);color:var(--vp-ink);
  background:linear-gradient(150deg,var(--vp-p50),var(--vp-p100));border:1px solid var(--vp-p100)}
.vp-side__plan small{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--vp-p700)}
.vp-side__plan b{font-size:1.1rem;letter-spacing:-.02em}
.vp-side__plan span{font-size:.8rem;color:var(--vp-muted)}
.vp-side__up{color:var(--vp-primary)!important;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.vp-scrim{position:fixed;inset:0;z-index:92;background:rgba(10,26,58,.5);backdrop-filter:blur(2px)}

.vp-main{padding:calc(var(--vp-nav-h) + var(--vp-main-pad)) var(--vp-main-pad) 48px calc(var(--vp-side-w) + var(--vp-main-pad));max-width:calc(var(--vp-side-w) + 1400px);min-height:100vh}
.vp-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.vp-pagehead h1{font-size:clamp(1.55rem,3vw,2.1rem);letter-spacing:-.03em}
.vp-pagehead p{margin-top:4px}
.vp-app--admin .vp-side__nav a.is-on{background:var(--vp-ink)}

@media (max-width:1023px){
  .vp-top{padding-left:var(--vp-gut)}
  .vp-top__burger{display:grid}
  .vp-top__logo{display:inline-flex}
  .vp-top__tag{display:inline-flex}
  .vp-top__prefs{display:none}
  .vp-top__name{display:none}
  .vp-side{transform:translateX(-102%);transition:transform .22s ease;box-shadow:none;width:min(300px,86vw)}
  .vp-side.is-open{transform:none;box-shadow:0 0 60px rgba(10,26,58,.4)}
  .vp-side__x{display:grid;place-items:center}
  .vp-main{padding-left:var(--vp-main-pad);max-width:none}
}
@media (max-width:520px){.vp-top__logo .vp-logo__txt small{display:none}}

/* ── Entrar / registro ────────────────────────────────────────────────────── */
.vp-auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:100vh;min-height:100dvh;background:#fff}
.vp-auth__side{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:36px clamp(28px,5vw,64px);color:#fff;
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--vp-accent) 55%,var(--vp-primary)) 0%,var(--vp-primary) 45%,color-mix(in srgb,var(--vp-primary) 55%,#000) 100%)}
.vp-auth__side .vp-logo,.vp-auth__side .vp-logo__txt small{color:#fff}
.vp-auth__side .vp-logo__txt small{opacity:.75}
.vp-auth__pitch h2{font-size:clamp(1.7rem,3vw,2.5rem);color:#fff;margin-bottom:22px;max-width:16ch}
.vp-auth__pitch li{display:flex;gap:12px;align-items:center;padding:10px 0;font-weight:550;opacity:.95}
.vp-auth__pitch .vp-ico{width:22px;height:22px;padding:8px;box-sizing:content-box;background:rgba(255,255,255,.16);border-radius:12px}
.vp-auth__side small{opacity:.7;font-size:.8rem}
.vp-auth__main{display:flex;flex-direction:column;padding:20px var(--vp-gut) 28px;min-width:0}
.vp-auth__top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.vp-auth__logo-m{display:none}
.vp-auth__box{width:100%;max-width:440px;margin:auto;padding:24px 0}
.vp-auth__box h1{font-size:clamp(1.6rem,3.4vw,2.1rem);letter-spacing:-.03em;margin-bottom:6px}
@media (max-width:900px){
  .vp-auth{grid-template-columns:1fr}
  .vp-auth__side{display:none}
  .vp-auth__logo-m{display:inline-flex}
  .vp-auth__top{margin-bottom:6px}
}
.vp-foot li span{color:var(--vp-ink);font-weight:500;font-size:.94rem}
.vp-foot li span small{font-size:.8rem;font-weight:400}
.vp-foot__ofi li span small{display:block;padding-left:30px;margin-top:1px}