/* Perfil, cuenta y estadísticas de JuriVerso. Reutiliza la paleta de Civil (.jcl) y añade solo lo propio. */
.jpf-page{--jpf-ink:#20352d;--jpf-muted:#5d7268;--jpf-line:#e3d9bc;--jpf-card:#fffdf8;--jpf-soft:#f6efe0;
  --jpf-bar:#285943;--jpf-s1:#2a78d6;--jpf-s2:#eb6834;--jpf-grid:#e9e1cc;
  --jpf-h0:#efe7d5;--jpf-h1:#cfe8d5;--jpf-h2:#93cba3;--jpf-h3:#4f9d70;--jpf-h4:#285943;
  color:var(--jpf-ink);font-family:Manrope,'DM Sans',sans-serif;display:grid;gap:22px;padding-bottom:30px}
.jpf-page h1{font-size:clamp(26px,3.2vw,38px);line-height:1.1;letter-spacing:-.02em}
.jpf-page h2{font-size:20px;margin-top:8px}
.jpf-muted,.jpf-page .jpf-muted{color:var(--jpf-muted);font-size:14px}

/* Cabecera */
.jpf-hero{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;background:linear-gradient(135deg,#fff9ee,#eaf6e7);border:1px solid var(--jpf-line);border-radius:24px;padding:clamp(18px,3vw,30px)}
.jpf-hero-id{display:flex;gap:18px;align-items:flex-start}
.jpf-hero-id p{color:var(--jpf-muted);max-width:56ch;margin-top:8px;line-height:1.55}
.jpf-facts{display:flex;flex-wrap:wrap;gap:8px 24px;margin:12px 0 0}
.jpf-facts div{display:grid;gap:2px}.jpf-facts dt{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--jpf-muted)}.jpf-facts dd{margin:0;font-weight:700;word-break:break-word}
.jpf-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.jpf-sync{display:block;margin-top:10px;font-size:13px;color:var(--jpf-muted)}.jpf-sync.is-error{color:#a3401b}
.jpf-avatar{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#ff9b2f;color:#1d140b;font-weight:900;font-family:Manrope,sans-serif}
.jpf-avatar.is-big{width:72px;height:72px;font-size:30px;box-shadow:0 0 0 4px #fffdf8,0 0 0 6px #ff9b2f}
.jpf-avatar.is-guest{background:#2a3a33;color:#fff;font-size:18px}.jpf-avatar.is-big.is-guest{font-size:30px}
.jpf-streak{display:grid;justify-items:center;text-align:center;gap:2px;min-width:150px;padding:16px 18px;border-radius:20px;background:#233d34;color:#fff}
.jpf-streak strong{font-size:44px;line-height:1;font-family:'Pixelify Sans',Manrope,sans-serif}.jpf-streak small{font-weight:800;color:#bfe9ce}.jpf-streak em{font-style:normal;font-size:12px;color:#e9d9b8;margin-top:4px}
.jpf-flame{font-size:30px}
.jpf-banner{padding:14px 18px;border-radius:16px;background:#eaf6e7;border:1px solid #b9dcbf;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.jpf-banner.is-warning{background:#fff4e2;border-color:#f0c98a}

/* Indicadores */
.jpf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.jpf-kpi{display:grid;gap:4px;padding:16px 18px;border-radius:18px;background:var(--jpf-card);border:1px solid var(--jpf-line)}
.jpf-kpi span{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--jpf-muted)}
.jpf-kpi strong{font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.jpf-kpi small{color:var(--jpf-muted);font-size:13px}

/* Gráficas */
.jpf-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.jpf-card{background:var(--jpf-card);border:1px solid var(--jpf-line);border-radius:20px;padding:18px 20px;display:grid;gap:12px;align-content:start}
.jpf-card header h3{font-size:18px}.jpf-card header p{color:var(--jpf-muted);font-size:14px;margin-top:2px}
.jpf-svg{width:100%;height:auto;display:block;overflow:visible}
.jpf-heat{max-width:420px}
.jpf-grid{stroke:var(--jpf-grid);stroke-width:1}
.jpf-axis{fill:var(--jpf-muted);font-size:11px;font-family:'DM Sans',sans-serif;font-variant-numeric:tabular-nums}
.jpf-bar{fill:var(--jpf-bar)}
.jpf-s1{fill:var(--jpf-s1);background:var(--jpf-s1)}.jpf-s2{fill:var(--jpf-s2);background:var(--jpf-s2)}
.jpf-svg g[data-tip]:hover .jpf-bar,.jpf-svg g[data-tip]:hover path,.jpf-svg g[data-tip]:hover rect:not([fill=transparent]){opacity:.82}
.jpf-heat-0{fill:var(--jpf-h0);background:var(--jpf-h0)}.jpf-heat-1{fill:var(--jpf-h1);background:var(--jpf-h1)}.jpf-heat-2{fill:var(--jpf-h2);background:var(--jpf-h2)}.jpf-heat-3{fill:var(--jpf-h3);background:var(--jpf-h3)}.jpf-heat-4{fill:var(--jpf-h4);background:var(--jpf-h4)}
.jpf-heat rect{stroke:var(--jpf-card);stroke-width:2}.jpf-heat rect:hover{stroke:var(--jpf-ink)}
.jpf-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--jpf-muted);align-items:center}
.jpf-legend span{display:inline-flex;gap:6px;align-items:center}
.jpf-sw{display:inline-block;width:12px;height:12px;border-radius:3px}
.jpf-heat-legend{gap:4px}
.jpf-hbars{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.jpf-hbars li{display:grid;grid-template-columns:minmax(110px,38%) 1fr auto;gap:10px;align-items:center;font-size:14px}
.jpf-hlabel{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jpf-htrack{height:12px;border-radius:6px;background:var(--jpf-soft);overflow:hidden}
.jpf-hfill{display:block;height:100%;border-radius:0 4px 4px 0;background:var(--jpf-bar)}
.jpf-hval{color:var(--jpf-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.jpf-subhead{font-size:14px;margin-top:6px}
.jpf-toplessons{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px}
.jpf-toplessons li{display:flex;justify-content:space-between;gap:10px;align-items:center}
.jpf-toplessons .jcl-btn{padding:4px 0;text-align:left;min-height:0}
.jpf-toplessons span{color:var(--jpf-muted);white-space:nowrap}
.jpf-empty{color:var(--jpf-muted);padding:18px;border:1px dashed var(--jpf-line);border-radius:14px;text-align:center}
.jpf-table summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--jpf-muted)}
.jpf-table table{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
.jpf-table th,.jpf-table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--jpf-line)}
.jpf-tip{position:fixed;z-index:120;pointer-events:none;max-width:260px;padding:8px 10px;border-radius:10px;background:#20352d;color:#fff;font-size:13px;line-height:1.35;box-shadow:0 8px 24px rgba(0,0,0,.18)}

/* Errores */
.jpf-mistakes .jcl-btn.is-dark{justify-self:start}
.jpf-mgroup{border-top:1px solid var(--jpf-line);padding-top:10px}
.jpf-mgroup summary{display:flex;justify-content:space-between;cursor:pointer;padding:6px 0}
.jpf-mgroup summary span{min-width:28px;text-align:center;border-radius:999px;background:#fde3d4;color:#8a3412;font-weight:800;font-size:13px;padding:2px 8px}
.jpf-mgroup .jcl-review-list{grid-template-columns:1fr}
.jpf-mmeta{display:block;font-size:13px;color:var(--jpf-muted);margin-top:4px}
.jpf-mmeta .jcl-btn{padding:0 0 0 6px;min-height:0}
.jpf-page>.jcl-tag,.jpf-page>.jcl-btn,.jpf-page>.jcl-overline{justify-self:start}
.jpf-practice h1.jrv-question{font-size:clamp(22px,2.6vw,30px);line-height:1.25}
.jpf-practice progress{width:100%;height:8px;accent-color:#285943}
.jpf-recall{display:grid;gap:10px;max-width:520px}
.jpf-recall label,.jpf-form label{display:grid;gap:6px;font-size:14px;font-weight:800}
.jpf-recall input,.jpf-form input{min-height:48px;padding:12px;border:1px solid #bfcdb2;border-radius:12px;background:#fffdf7;color:#20352d;font:inherit;font-weight:500}
.jpf-recall input:focus-visible,.jpf-form input:focus-visible{outline:3px solid #db741d;outline-offset:2px}
.jpf-foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;border-top:1px solid var(--jpf-line);padding-top:14px}
.jpf-danger{color:#a3401b !important}
.jpf-policy{max-width:860px}.jpf-policy p,.jpf-policy li{line-height:1.65}.jpf-policy ul{padding-left:20px}

/* Menú lateral (fondo oscuro) */
.jpf-side{display:grid;gap:6px;margin-top:12px}
.jpf-side-login,.jpf-side-user{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:16px;border:1px solid rgba(191,233,206,.28);background:rgba(255,255,255,.06);color:#fff;text-align:left;font-family:Manrope,sans-serif}
.jpf-side-login:hover,.jpf-side-user:hover{background:rgba(255,255,255,.12)}
.jpf-side-login span:not(.jpf-avatar),.jpf-side-user span:not(.jpf-avatar):not(.jpf-streak-pill){display:grid;min-width:0;flex:1}
.jpf-side strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jpf-side small{font-size:12px;color:#bdebc5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jpf-side .jpf-avatar{width:34px;height:34px}
.jpf-streak-pill{flex:none;padding:4px 8px;border-radius:999px;background:#ff9a29;color:#17100c;font-weight:900;font-size:13px}
.jpf-side-link{background:none;border:0;color:#c9d2dc;font-size:12px;font-weight:700;text-align:left;padding:2px 12px}
.jpf-side-link:hover{color:#fff}
.is-loading{opacity:.7}

/* Barra superior (sobre todo en celular, donde el menú es un cajón) */
.jpf-top{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-weight:800;font-size:13px}
.jpf-top:hover{background:rgba(255,255,255,.16)}
body.jv-content-theme .jpf-top{background:#fffdf7;border-color:#e9d9c0;color:#244536}
body.jv-content-theme .jpf-top:hover{background:#fff3e0}
.jpf-top .jpf-avatar{width:30px;height:30px;font-size:14px}
.jpf-top:not(:has(.jpf-avatar)){padding:4px 14px}
@media(max-width:620px){.jpf-top-label{display:none}.jpf-top:not(:has(.jpf-avatar)) .jpf-top-label{display:inline}}

/* Ventanas de ingreso y perfil */
.jpf-modal{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:16px}
.jpf-modal-backdrop{position:absolute;inset:0;background:rgba(7,16,25,.55)}
.jpf-modal-card{position:relative;width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fffdf8;color:#20352d;border-radius:22px;padding:26px 24px;display:grid;gap:12px;box-shadow:0 24px 70px rgba(0,0,0,.3);font-family:Manrope,'DM Sans',sans-serif}
.jpf-modal-card h2{font-size:24px;line-height:1.15}
.jpf-modal-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid #e3d9bc;background:#fff;font-size:20px;line-height:1;color:#20352d}
.jpf-google{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:12px;border:1px solid #c9c2ad;background:#fff;color:#1f1f1f;font-weight:800}
.jpf-google:hover{background:#f6f6f4}.jpf-google:disabled{opacity:.6}
.jpf-divider{display:flex;align-items:center;gap:10px;color:#5d7268;font-size:13px}.jpf-divider::before,.jpf-divider::after{content:'';flex:1;height:1px;background:#e3d9bc}
.jpf-form{display:grid;gap:12px}
.jpf-form small{font-weight:500;color:#5d7268}
.jpf-form input:disabled{background:#f1ece0;color:#5d7268}
.jpf-uni{display:grid;gap:6px}
.jpf-suggest{list-style:none;margin:0;padding:6px;border:1px solid #bfcdb2;border-radius:12px;background:#fffdf7;box-shadow:0 10px 24px rgba(32,53,45,.12);max-height:248px;overflow:auto;display:grid;gap:2px}
.jpf-suggest[hidden]{display:none}
.jpf-suggest li{padding:10px 12px;border-radius:9px;font-size:14px;font-weight:600;line-height:1.3;color:#20352d;cursor:pointer}
.jpf-suggest li:hover,.jpf-suggest li[aria-selected="true"]{background:#e1f0e3;color:#254938}
.jpf-suggest li.is-empty{cursor:default;color:#5d7268;font-weight:500}
.jpf-suggest li.is-empty:hover{background:none}
.jpf-check{display:flex !important;grid-template-columns:none;gap:10px !important;align-items:flex-start;font-weight:500 !important;line-height:1.45}
.jpf-check input{min-height:0 !important;width:20px;height:20px;margin-top:2px;flex:none;accent-color:#285943}
.jpf-check a{text-decoration:underline;font-weight:700}
.jpf-form-error{margin:0;padding:10px 12px;border-radius:10px;background:#fde3d4;color:#7a2e0e;font-size:14px}
.jpf-form-error.is-ok{background:#e4f3e6;color:#1f5130}
.jpf-modal-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px}

@media(max-width:720px){
  .jpf-hero{grid-template-columns:1fr}.jpf-streak{grid-auto-flow:column;justify-content:start;align-items:baseline;gap:10px;min-width:0}.jpf-streak em{grid-column:1/-1}
  .jpf-hero-id{flex-direction:column}
  .jpf-hbars li{grid-template-columns:1fr auto}.jpf-htrack{grid-column:1/-1;grid-row:2}
}
@media(prefers-reduced-motion:reduce){.jpf-page *{transition:none !important;animation:none !important}}