:root{
  --ww-bg:#f5f7fb;
  --ww-surface:#ffffff;
  --ww-surface-2:#f8fbff;
  --ww-text:#0f172a;
  --ww-sub:#475569;
  --ww-muted:#94a3b8;
  --ww-border:rgba(15,23,42,.10);
  --ww-shadow:0 18px 44px rgba(2,8,23,.10);
  --ww-shadow-soft:0 10px 26px rgba(2,8,23,.08);
  --ww-primary:#1d4ed8;
  --ww-primary-2:#0ea5e9;
  --ww-accent:#14b8a6;
  --ww-success:#16a34a;
  --ww-warning:#d97706;
  --ww-danger:#dc2626;
  --ww-radius-xl:28px;
  --ww-radius-lg:20px;
  --ww-radius-md:16px;
  --ww-radius-sm:12px;
  --ww-grad-main:linear-gradient(135deg,#0f172a 0%,#1d4ed8 52%,#14b8a6 100%);
  --ww-grad-soft:linear-gradient(135deg,rgba(29,78,216,.10),rgba(20,184,166,.08));
  --ww-answer-ring:0 0 0 4px rgba(29,78,216,.10);
  --ww-transition:180ms cubic-bezier(.2,.8,.2,1);
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 0% 0%, rgba(29,78,216,.06), transparent 22%),
    radial-gradient(circle at 100% 0%, rgba(20,184,166,.08), transparent 22%),
    radial-gradient(circle at 100% 100%, rgba(37,99,235,.05), transparent 25%),
    var(--ww-bg);
}
body .question-container,
body .ls-question{
  margin-bottom:18px;
}

/* ---------- shell / wrappers ---------- */
.ww-shell,
#ww-report,
.ww-report,
.ww-results-shell{
  max-width:1120px;
  margin:0 auto;
}
.ww-card,
.ww-surface,
.ww-result-card,
.ww-soft-card{
  background:var(--ww-surface);
  border:1px solid var(--ww-border);
  border-radius:var(--ww-radius-lg);
  box-shadow:var(--ww-shadow-soft);
}
.ww-soft-card{ background:var(--ww-surface-2); }
.ww-hero{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:var(--ww-grad-main);
  color:#fff;
  padding:24px;
  box-shadow:0 24px 54px rgba(15,23,42,.18);
}
.ww-hero::before,
.ww-hero::after{
  content:"";
  position:absolute;
  border-radius:999px;
  opacity:.22;
  pointer-events:none;
  filter:blur(4px);
}
.ww-hero::before{
  width:220px;height:220px;right:-40px;top:-60px;background:rgba(255,255,255,.20);
  animation:ww-float 10s ease-in-out infinite;
}
.ww-hero::after{
  width:140px;height:140px;left:-25px;bottom:-35px;background:rgba(255,255,255,.12);
  animation:ww-float 8s ease-in-out infinite reverse;
}
.ww-chip,
.ww-pill,
.ww-badge,
.ww-step,
.ww-streak,
.ww-level{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.02em;
}
.ww-chip,.ww-pill,.ww-badge{
  padding:8px 12px;
  background:rgba(255,255,255,.16);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
}
.ww-step{
  padding:7px 12px;
  background:#eff6ff;
  color:var(--ww-primary);
  border:1px solid #bfdbfe;
}
.ww-h,
.ww-title,
.ww-report-title{ margin:0 0 8px 0; font-weight:950; letter-spacing:-.03em; }
.ww-sub,
.ww-report-subtitle{ color:var(--ww-sub); line-height:1.65; }
.ww-hero .ww-sub{ color:rgba(255,255,255,.92); }

/* ---------- progress / gamification HUD ---------- */
.ww-progress-wrap{
  position:sticky;
  top:10px;
  z-index:25;
  margin:0 auto 16px;
  max-width:1120px;
  padding:0 2px;
}
.ww-progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border:1px solid var(--ww-border);
  border-radius:20px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px);
  box-shadow:var(--ww-shadow-soft);
  padding:12px 14px;
}
.ww-progress-main{ flex:1 1 360px; min-width:260px; }
.ww-progress-label{ font-size:12px; font-weight:900; color:#334155; margin-bottom:7px; }
.ww-progress-track{
  height:12px; background:#e2e8f0; border-radius:999px; overflow:hidden; position:relative;
}
.ww-progress-bar{
  height:12px; width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--ww-primary),var(--ww-primary-2),var(--ww-accent));
  box-shadow:0 0 18px rgba(29,78,216,.25);
  transition:width 320ms cubic-bezier(.2,.8,.2,1);
}
.ww-progress-bar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:ww-sheen 2.2s linear infinite;
}
.ww-stats{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ww-stat{
  min-width:120px;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid var(--ww-border);
}
.ww-stat-k{font-size:11px;color:#64748b;font-weight:800}
.ww-stat-v{font-size:16px;font-weight:950;color:var(--ww-text);margin-top:3px}
.ww-streak{
  padding:8px 12px;background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;
}
.ww-level{
  padding:8px 12px;background:#ecfeff;color:#0f766e;border:1px solid #99f6e4;
}
.ww-motivation{font-size:12px;color:#334155;font-weight:800}

/* ---------- questions / answer cards ---------- */
.question-container .answer-container,
.ls-question .answer-container{ position:relative; }
.ww-cardified .ls-answers ul,
.ww-cardified ul.ls-answers,
.ww-cardified .answers-list,
.ww-cardified .list-unstyled{
  list-style:none!important;
  padding-left:0!important;
  margin:0;
}
.ww-cardified .ls-answers li,
.ww-cardified li.answer-item,
.ww-cardified .answer-item{
  margin:10px 0;
}
.ww-answer-card,
.ww-cardified label,
.ww-cardified .ls-answers label{
  position:relative;
  display:flex; gap:14px; align-items:flex-start;
  width:100%; padding:16px;
  border-radius:20px; border:1px solid var(--ww-border);
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:var(--ww-shadow-soft);
  cursor:pointer; overflow:hidden;
  transition:transform var(--ww-transition), box-shadow var(--ww-transition), border-color var(--ww-transition), background var(--ww-transition);
}
.ww-answer-card:hover,
.ww-cardified label:hover{
  transform:translateY(-2px);
  border-color:rgba(29,78,216,.28);
  box-shadow:0 18px 34px rgba(2,8,23,.11);
}
.ww-answer-card:focus-within{outline:none; box-shadow:var(--ww-answer-ring), var(--ww-shadow-soft)}
.ww-answer-card.is-selected,
.ww-cardified li.is-selected > label,
.ww-cardified label.is-selected{
  border-color:rgba(29,78,216,.45);
  background:linear-gradient(180deg,rgba(219,234,254,.72),rgba(240,249,255,.95));
  box-shadow:var(--ww-answer-ring),0 18px 34px rgba(29,78,216,.12);
}
.ww-answer-card.is-selected::after,
.ww-cardified label.is-selected::after{
  content:""; position:absolute; inset:auto -30px -30px auto; width:120px; height:120px;
  background:radial-gradient(circle, rgba(14,165,233,.12), transparent 65%);
}
.ww-answer-check{
  flex:0 0 auto; width:24px; height:24px; border-radius:999px;
  border:2px solid #cbd5e1; margin-top:2px; position:relative; background:#fff;
  transition:all var(--ww-transition);
}
.ww-answer-card.is-selected .ww-answer-check{
  border-color:var(--ww-primary); background:var(--ww-primary); transform:scale(1.05);
}
.ww-answer-card.is-selected .ww-answer-check::after{
  content:""; position:absolute; inset:5px; border-radius:999px; background:#fff;
}
.ww-answer-media{
  position:relative; flex:0 0 auto; width:56px; height:56px; border-radius:18px;
  background:linear-gradient(135deg,#eff6ff,#ecfeff); border:1px solid #dbeafe;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.ww-answer-media img,
.ww-answer-media .ww-gif,
.ww-answer-card img.ww-inline-image{
  width:100%; height:100%; object-fit:cover; display:block;
}
.ww-answer-card:hover .ww-answer-media{ transform:translateY(-1px) scale(1.02); transition:transform var(--ww-transition); }
.ww-answer-content{ flex:1 1 auto; min-width:0; }
.ww-answer-title{ font-size:16px; line-height:1.35; color:var(--ww-text); font-weight:950; }
.ww-answer-subtitle{ margin-top:3px; font-size:13px; color:var(--ww-primary); font-weight:800; }
.ww-answer-desc{ margin-top:5px; color:var(--ww-sub); font-size:13px; line-height:1.55; }
.ww-answer-points{
  display:inline-flex; margin-top:8px; padding:5px 9px; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:11px; font-weight:900;
}
.ww-cardified input[type="radio"],
.ww-cardified input[type="checkbox"]{
  position:absolute!important; opacity:0!important; pointer-events:none!important;
}

/* image-based choices / gifs */
.ww-answer-card.has-image .ww-answer-media,
.ww-cardified label.has-image .ww-answer-media{ width:78px; height:78px; border-radius:20px; }
.ww-floaty,
.ww-gamify-float{ animation:ww-float 5.5s ease-in-out infinite; }
.ww-pop-in{ animation:ww-pop .34s cubic-bezier(.2,.8,.2,1); }
.ww-sparkle{ position:relative; }
.ww-sparkle::before,
.ww-sparkle::after{ content:"✦"; position:absolute; font-size:12px; color:#38bdf8; opacity:.8; animation:ww-twinkle 1.8s ease-in-out infinite; }
.ww-sparkle::before{ right:-4px; top:-5px; }
.ww-sparkle::after{ left:-2px; bottom:-7px; animation-delay:.4s; }

/* ---------- question text / sections ---------- */
.ww-section-intro,
.question-boilerplate .ww-soft,
.ww-panel{
  border:1px solid var(--ww-border);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--ww-shadow-soft);
}
.ww-panel{ padding:18px; }
.question-title,
.ls-question .question-text,
.question-container .q-text,
.question-container .question-text{
  color:var(--ww-text);
  font-weight:950;
  line-height:1.35;
}
.questionhelp,
.ls-questionhelp,
.em-tip{
  color:var(--ww-sub);
  font-size:13px;
  line-height:1.6;
}
.mandatoryasterisk{ color:var(--ww-danger)!important; }

/* ---------- buttons ---------- */
.btn,
input[type="submit"],
button[type="submit"],
.ls-move-btn,
#ls-button-submit,
#movenextbtn,
#moveprevbtn{
  border-radius:14px!important;
  font-weight:900!important;
  letter-spacing:.01em;
  transition:transform var(--ww-transition), box-shadow var(--ww-transition), filter var(--ww-transition);
}
.btn-primary,
#movenextbtn,
#ls-button-submit{
  background:linear-gradient(135deg,#111827,#1d4ed8)!important;
  border-color:#1d4ed8!important;
  box-shadow:0 12px 28px rgba(29,78,216,.22);
}
.btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
#movenextbtn:hover,
#ls-button-submit:hover{
  transform:translateY(-1px);
  filter:saturate(1.04);
}

/* ---------- result cards / premium reports ---------- */
#ww-report,
.ww-report,
.ww-results-shell{ color:var(--ww-text); }
.ww-report-box,
.ww-box{
  background:#fff;
  border:1px solid var(--ww-border);
  border-radius:30px;
  box-shadow:var(--ww-shadow);
  overflow:hidden;
}
.ww-report-header,
.ww-header{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start;
  padding:24px;
  background:linear-gradient(135deg, rgba(29,78,216,.10), rgba(20,184,166,.06));
  border-bottom:1px solid var(--ww-border);
}
.ww-title-xl,
.ww-title{ font-size:clamp(28px,4vw,40px); font-weight:1000; line-height:1.05; letter-spacing:-.04em; }
.ww-grid-2,
.ww-grid2{ display:grid; grid-template-columns:1.1fr .9fr; gap:14px; padding:18px 24px; }
.ww-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ww-kpis,.ww-stats-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.ww-kpi,.ww-stat-card{
  background:#fff; border:1px solid var(--ww-border); border-radius:18px; padding:14px 16px;
}
.ww-k,.ww-stat-label{ font-size:11px; color:#64748b; font-weight:800; }
.ww-v,.ww-stat-value{ margin-top:4px; font-size:18px; font-weight:950; display:flex; align-items:center; gap:8px; }
.ww-dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.ww-score-ring{
  --p:72; --size:160px;
  width:var(--size); height:var(--size); border-radius:50%;
  background:conic-gradient(var(--ww-primary) calc(var(--p) * 1%), #e2e8f0 0);
  display:grid; place-items:center; position:relative; margin-inline:auto;
  box-shadow:0 18px 38px rgba(29,78,216,.14);
}
.ww-score-ring::before{
  content:""; position:absolute; inset:13px; border-radius:50%; background:#fff;
}
.ww-score-ring > div{ position:relative; text-align:center; z-index:1; }
.ww-score-number{ font-size:34px; font-weight:1000; line-height:1; }
.ww-score-label{ font-size:12px; color:#64748b; font-weight:800; margin-top:6px; }
.ww-axis,
.ww-axis-card{ margin-top:10px; }
.ww-axis-row{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; font-weight:900;
}
.ww-bar,
.ww-barbg{ margin-top:8px; height:12px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.ww-bar > span,
.ww-barbg > span{
  position:relative; display:block; height:12px; border-radius:999px; background:linear-gradient(90deg,var(--ww-primary),var(--ww-accent));
}
.ww-bar > span::after,
.ww-barbg > span::after{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); animation:ww-sheen 2.4s linear infinite;
}
.ww-list{ margin:0; padding-left:18px; color:var(--ww-sub); font-size:14px; line-height:1.75; }
.ww-p{ color:var(--ww-sub); line-height:1.8; }
.ww-actions{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding:0 24px 24px; }
.ww-btn{
  border:0; border-radius:14px; padding:12px 16px; font-weight:950; cursor:pointer;
  transition:transform var(--ww-transition),box-shadow var(--ww-transition);
}
.ww-btn:hover{ transform:translateY(-1px); }
.ww-primary{ background:#111827; color:#fff; box-shadow:0 14px 28px rgba(15,23,42,.18); }
.ww-softbtn{ background:#eef2f7; color:#111827; }
.ww-cta-banner{
  margin:0 24px 24px; padding:18px; border-radius:22px; color:#fff; background:var(--ww-grad-main); box-shadow:0 18px 40px rgba(15,23,42,.16);
}
.ww-watermark::before{
  content:"WEISEWELT"; position:absolute; inset:auto 10px 8px auto; font-size:10px; letter-spacing:.3em; color:rgba(15,23,42,.14); font-weight:1000;
}

/* ---------- confetti ---------- */
.ww-confetti-host{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:9999; }
.ww-confetti-piece{
  position:absolute; width:10px; height:16px; border-radius:3px; opacity:.92;
  animation:ww-confetti-fall 1700ms linear forwards;
}

/* ---------- motion opt-out ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* ---------- print ---------- */
@media print{
  .navigator,.progress-bar,.ls-progress,.questionhelp,.ls-questionhelp,.btn,.ww-progress-wrap,.ww-actions,.navbar,.top-container,.bottom-container{ display:none!important; }
  body{ background:#fff!important; }
  .ww-report-box,.ww-box,.ww-card,.ww-soft-card,.ww-panel{ box-shadow:none!important; }
  #ww-report,.ww-report,.ww-results-shell{ max-width:none!important; margin:0!important; padding:0!important; }
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .ww-grid-2,.ww-grid2{ grid-template-columns:1fr; }
  .ww-grid-3{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .ww-hero{ padding:18px; border-radius:24px; }
  .ww-answer-card,
  .ww-cardified label{ padding:14px; border-radius:18px; }
  .ww-answer-media{ width:48px; height:48px; border-radius:16px; }
  .ww-answer-card.has-image .ww-answer-media,
  .ww-cardified label.has-image .ww-answer-media{ width:68px;height:68px; }
  .ww-report-header,.ww-header,.ww-grid2,.ww-grid-2,.ww-actions{ padding-left:16px; padding-right:16px; }
}

/* ---------- animations ---------- */
@keyframes ww-float{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-8px); }
}
@keyframes ww-pop{
  0%{ transform:scale(.96); opacity:.65; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes ww-twinkle{
  0%,100%{ transform:scale(.8); opacity:.35; }
  50%{ transform:scale(1.12); opacity:1; }
}
@keyframes ww-sheen{
  from{ transform:translateX(-120%); }
  to{ transform:translateX(120%); }
}
@keyframes ww-confetti-fall{
  0%{ transform:translate3d(0,-10vh,0) rotate(0deg); opacity:1; }
  100%{ transform:translate3d(var(--dx,40px),110vh,0) rotate(580deg); opacity:0; }
}


/* =========================================================
   WW Premium Results Add-ons: Tabs + Semáforo + Charts + Tables
   (Reusable across all evaluations)
   ========================================================= */

.ww-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}
.ww-tab{
  appearance:none;
  border:1px solid var(--ww-border);
  background:#fff;
  color:var(--ww-text);
  padding:8px 12px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  cursor:pointer;
  transition:var(--ww-transition);
}
.ww-tab:hover{
  transform:translateY(-1px);
  box-shadow:var(--ww-shadow-soft);
  border-color:rgba(29,78,216,.25);
}
.ww-tab[aria-selected="true"]{
  background:var(--ww-grad-soft);
  border-color:rgba(29,78,216,.35);
}
.ww-tabpanels{ margin-top:12px; }
.ww-panel{ display:none; }
.ww-panel.active{ display:block; }

/* Semáforo */
.ww-traffic{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:var(--ww-radius-lg);
  border:1px solid var(--ww-border);
  background:#fff;
  box-shadow:var(--ww-shadow-soft);
}
.ww-traffic-lights{
  width:46px;
  padding:8px;
  border-radius:18px;
  background:#0f172a;
  box-shadow:inset 0 10px 18px rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:0 0 auto;
}
.ww-light{
  width:18px;height:18px;border-radius:999px;
  opacity:.22;
  background:#94a3b8;
}
.ww-light.red{ background:var(--ww-danger); }
.ww-light.yellow{ background:var(--ww-warning); }
.ww-light.green{ background:var(--ww-success); }
.ww-light.on{
  opacity:1;
  box-shadow:0 0 0 4px rgba(255,255,255,.10), 0 0 26px rgba(22,163,74,.40);
}
.ww-light.on.red{ box-shadow:0 0 0 4px rgba(255,255,255,.10), 0 0 26px rgba(220,38,38,.45); }
.ww-light.on.yellow{ box-shadow:0 0 0 4px rgba(255,255,255,.10), 0 0 26px rgba(217,119,6,.45); }

.ww-traffic-meta b{ font-weight:1000; }
.ww-traffic-meta .ww-p{ margin:4px 0 0 0; }

/* Bars (Charts) */
.ww-bars{ display:grid; gap:10px; margin-top:10px; }
.ww-barrow{
  border:1px solid var(--ww-border);
  border-radius:var(--ww-radius-md);
  padding:10px 12px;
  background:#fff;
}
.ww-barhead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13px; font-weight:950;
}
.ww-barhead span{ color:#64748b; font-weight:900; }
.ww-barbg{
  margin-top:8px;
  height:10px;
  border-radius:999px;
  background:rgba(148,163,184,.25);
  overflow:hidden;
}
.ww-barfill{
  height:10px;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--ww-primary), var(--ww-accent));
  transition:width 600ms ease;
}

/* Donut (SVG) */
.ww-donut{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
}
.ww-donut svg{ width:160px; height:160px; }
.ww-legend{ display:grid; gap:8px; }
.ww-legend-item{
  display:flex; align-items:center; gap:8px;
  font-weight:900; font-size:13px; color:var(--ww-text);
}
.ww-swatch{ width:10px; height:10px; border-radius:999px; background:var(--ww-primary); }

/* Tables */
.ww-tablewrap{
  overflow:auto;
  border:1px solid var(--ww-border);
  border-radius:var(--ww-radius-md);
  background:#fff;
  box-shadow:var(--ww-shadow-soft);
}
.ww-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
.ww-table th{
  position:sticky; top:0;
  background:var(--ww-surface-2);
  border-bottom:1px solid var(--ww-border);
  padding:10px;
  text-align:left;
  font-weight:1000;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.ww-table td{
  border-bottom:1px solid rgba(15,23,42,.06);
  padding:10px;
  vertical-align:top;
}
.ww-table tr:nth-child(even) td{ background:#fcfdff; }

.ww-pill.good{ border-color:rgba(22,163,74,.25) !important; background:rgba(22,163,74,.08) !important; }
.ww-pill.warn{ border-color:rgba(217,119,6,.25) !important; background:rgba(217,119,6,.10) !important; }
.ww-pill.bad{ border-color:rgba(220,38,38,.25) !important; background:rgba(220,38,38,.08) !important; }


/* =========================================================
   WW v5 Add-ons: Diagnosis blocks + Accordions + Skeleton
   ========================================================= */
.ww-skeleton{
  background: linear-gradient(90deg, rgba(148,163,184,.18), rgba(148,163,184,.06), rgba(148,163,184,.18));
  background-size: 220% 100%;
  animation: ww-shimmer 1.05s ease-in-out infinite;
  border-radius: var(--ww-radius-md);
  min-height: 14px;
}
@keyframes ww-shimmer{ 0%{background-position: 0% 50%} 100%{background-position: 200% 50%} }

.ww-accordion{ display:flex; flex-direction:column; gap:10px; }
.ww-acc-item{ border:1px solid var(--ww-border); border-radius: var(--ww-radius-md); background: var(--ww-surface); overflow:hidden; }
.ww-acc-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; cursor:pointer; user-select:none;
}
.ww-acc-head:hover{ background: rgba(29,78,216,.04); }
.ww-acc-title{ font-weight: 1000; letter-spacing:-.2px; }
.ww-acc-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ww-acc-body{
  display:none; padding: 0 14px 14px 14px; color: var(--ww-sub);
}
.ww-acc-item.open .ww-acc-body{ display:block; }
.ww-chiprow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.ww-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius: 999px;
  background: rgba(29,78,216,.06);
  border: 1px solid rgba(29,78,216,.16);
  font-weight: 900;
  font-size: 12px;
}
.ww-chip.good{ background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.18); }
.ww-chip.warn{ background: rgba(217,119,6,.10); border-color: rgba(217,119,6,.18); }
.ww-chip.bad{  background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.18); }

.ww-commerce-box{
  margin-top:14px;
  border:1px solid var(--ww-border);
  border-radius:var(--ww-radius-lg);
  background:linear-gradient(135deg, rgba(29,78,216,.06), rgba(34,197,94,.06));
  padding:14px;
  box-shadow:var(--ww-shadow-soft);
}
.ww-commerce-title{ margin:0; font-size:15px; font-weight:1000; letter-spacing:-.2px; }
.ww-commerce-sub{ margin-top:5px; color:var(--ww-sub); font-size:13px; line-height:1.7; }
.ww-commerce-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.ww-commerce-note{ margin-top:10px; color:#64748b; font-size:12px; line-height:1.65; }
.ww-btn.ww-accent{
  background: linear-gradient(135deg, #1d4ed8, #22c55e);
  color:#fff; border:0;
}


:root{
  --ww-bg:#f5f7fb;
  --ww-surface:#ffffff;
  --ww-surface-2:#f8fbff;
  --ww-text:#0f172a;
  --ww-sub:#475569;
  --ww-muted:#94a3b8;
  --ww-border:rgba(15,23,42,.10);
  --ww-shadow:0 18px 44px rgba(2,8,23,.10);
  --ww-shadow-soft:0 10px 26px rgba(2,8,23,.08);
  --ww-primary:#1d4ed8;
  --ww-primary-2:#0ea5e9;
  --ww-accent:#14b8a6;
  --ww-success:#16a34a;
  --ww-warning:#d97706;
  --ww-danger:#dc2626;
  --ww-radius-xl:28px;
  --ww-radius-lg:20px;
  --ww-radius-md:16px;
  --ww-radius-sm:12px;
  --ww-grad-main:linear-gradient(135deg,#0f172a 0%,#1d4ed8 52%,#14b8a6 100%);
  --ww-grad-soft:linear-gradient(135deg,rgba(29,78,216,.10),rgba(20,184,166,.08));
  --ww-answer-ring:0 0 0 4px rgba(29,78,216,.10);
  --ww-transition:180ms cubic-bezier(.2,.8,.2,1);
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 0% 0%, rgba(29,78,216,.06), transparent 22%),
    radial-gradient(circle at 100% 0%, rgba(20,184,166,.08), transparent 22%),
    radial-gradient(circle at 100% 100%, rgba(37,99,235,.05), transparent 25%),
    var(--ww-bg);
}
body .question-container,
body .ls-question{
  margin-bottom:18px;
}

/* ---------- shell / wrappers ---------- */
.ww-shell,
#ww-report,
.ww-report,
.ww-results-shell{
  max-width:1120px;
  margin:0 auto;
}
.ww-card,
.ww-surface,
.ww-result-card,
.ww-soft-card{
  background:var(--ww-surface);
  border:1px solid var(--ww-border);
  border-radius:var(--ww-radius-lg);
  box-shadow:var(--ww-shadow-soft);
}
.ww-soft-card{ background:var(--ww-surface-2); }
.ww-hero{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:var(--ww-grad-main);
  color:#fff;
  padding:24px;
  box-shadow:0 24px 54px rgba(15,23,42,.18);
}
.ww-hero::before,
.ww-hero::after{
  content:"";
  position:absolute;
  border-radius:999px;
  opacity:.22;
  pointer-events:none;
  filter:blur(4px);
}
.ww-hero::before{
  width:220px;height:220px;right:-40px;top:-60px;background:rgba(255,255,255,.20);
  animation:ww-float 10s ease-in-out infinite;
}
.ww-hero::after{
  width:140px;height:140px;left:-25px;bottom:-35px;background:rgba(255,255,255,.12);
  animation:ww-float 8s ease-in-out infinite reverse;
}
.ww-chip,
.ww-pill,
.ww-badge,
.ww-step,
.ww-streak,
.ww-level{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.02em;
}
.ww-chip,.ww-pill,.ww-badge{
  padding:8px 12px;
  background:rgba(255,255,255,.16);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
}
.ww-step{
  padding:7px 12px;
  background:#eff6ff;
  color:var(--ww-primary);
  border:1px solid #bfdbfe;
}
.ww-h,
.ww-title,
.ww-report-title{ margin:0 0 8px 0; font-weight:950; letter-spacing:-.03em; }
.ww-sub,
.ww-report-subtitle{ color:var(--ww-sub); line-height:1.65; }
.ww-hero .ww-sub{ color:rgba(255,255,255,.92); }

/* ---------- progress / gamification HUD ---------- */
.ww-progress-wrap{
  position:sticky;
  top:10px;
  z-index:25;
  margin:0 auto 16px;
  max-width:1120px;
  padding:0 2px;
}
.ww-progress-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border:1px solid var(--ww-border);
  border-radius:20px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px);
  box-shadow:var(--ww-shadow-soft);
  padding:12px 14px;
}
.ww-progress-main{ flex:1 1 360px; min-width:260px; }
.ww-progress-label{ font-size:12px; font-weight:900; color:#334155; margin-bottom:7px; }
.ww-progress-track{
  height:12px; background:#e2e8f0; border-radius:999px; overflow:hidden; position:relative;
}
.ww-progress-bar{
  height:12px; width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--ww-primary),var(--ww-primary-2),var(--ww-accent));
  box-shadow:0 0 18px rgba(29,78,216,.25);
  transition:width 320ms cubic-bezier(.2,.8,.2,1);
}
.ww-progress-bar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:ww-sheen 2.2s linear infinite;
}
.ww-stats{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ww-stat{
  min-width:120px;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid var(--ww-border);
}
.ww-stat-k{font-size:11px;color:#64748b;font-weight:800}
.ww-stat-v{font-size:16px;font-weight:950;color:var(--ww-text);margin-top:3px}
.ww-streak{
  padding:8px 12px;background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;
}
.ww-level{
  padding:8px 12px;background:#ecfeff;color:#0f766e;border:1px solid #99f6e4;
}
.ww-motivation{font-size:12px;color:#334155;font-weight:800}

/* ---------- questions / answer cards ---------- */
.question-container .answer-container,
.ls-question .answer-container{ position:relative; }
.ww-cardified .ls-answers ul,
.ww-cardified ul.ls-answers,
.ww-cardified .answers-list,
.ww-cardified .list-unstyled{
  list-style:none!important;
  padding-left:0!important;
  margin:0;
}
.ww-cardified .ls-answers li,
.ww-cardified li.answer-item,
.ww-cardified .answer-item{
  margin:10px 0;
}
.ww-answer-card,
.ww-cardified label,
.ww-cardified .ls-answers label{
  position:relative;
  display:flex; gap:14px; align-items:flex-start;
  width:100%; padding:16px;
  border-radius:20px; border:1px solid var(--ww-border);
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:var(--ww-shadow-soft);
  cursor:pointer; overflow:hidden;
  transition:transform var(--ww-transition), box-shadow var(--ww-transition), border-color var(--ww-transition), background var(--ww-transition);
}
.ww-answer-card:hover,
.ww-cardified label:hover{
  transform:translateY(-2px);
  border-color:rgba(29,78,216,.28);
  box-shadow:0 18px 34px rgba(2,8,23,.11);
}
.ww-answer-card:focus-within{outline:none; box-shadow:var(--ww-answer-ring), var(--ww-shadow-soft)}
.ww-answer-card.is-selected,
.ww-cardified li.is-selected > label,
.ww-cardified label.is-selected{
  border-color:rgba(29,78,216,.45);
  background:linear-gradient(180deg,rgba(219,234,254,.72),rgba(240,249,255,.95));
  box-shadow:var(--ww-answer-ring),0 18px 34px rgba(29,78,216,.12);
}
.ww-answer-card.is-selected::after,
.ww-cardified label.is-selected::after{
  content:""; position:absolute; inset:auto -30px -30px auto; width:120px; height:120px;
  background:radial-gradient(circle, rgba(14,165,233,.12), transparent 65%);
}
.ww-answer-check{
  flex:0 0 auto; width:24px; height:24px; border-radius:999px;
  border:2px solid #cbd5e1; margin-top:2px; position:relative; background:#fff;
  transition:all var(--ww-transition);
}
.ww-answer-card.is-selected .ww-answer-check{
  border-color:var(--ww-primary); background:var(--ww-primary); transform:scale(1.05);
}
.ww-answer-card.is-selected .ww-answer-check::after{
  content:""; position:absolute; inset:5px; border-radius:999px; background:#fff;
}
.ww-answer-media{
  position:relative; flex:0 0 auto; width:56px; height:56px; border-radius:18px;
  background:linear-gradient(135deg,#eff6ff,#ecfeff); border:1px solid #dbeafe;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.ww-answer-media img,
.ww-answer-media .ww-gif,
.ww-answer-card img.ww-inline-image{
  width:100%; height:100%; object-fit:cover; display:block;
}
.ww-answer-card:hover .ww-answer-media{ transform:translateY(-1px) scale(1.02); transition:transform var(--ww-transition); }
.ww-answer-content{ flex:1 1 auto; min-width:0; }
.ww-answer-title{ font-size:16px; line-height:1.35; color:var(--ww-text); font-weight:950; }
.ww-answer-subtitle{ margin-top:3px; font-size:13px; color:var(--ww-primary); font-weight:800; }
.ww-answer-desc{ margin-top:5px; color:var(--ww-sub); font-size:13px; line-height:1.55; }
.ww-answer-points{
  display:inline-flex; margin-top:8px; padding:5px 9px; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:11px; font-weight:900;
}
.ww-cardified input[type="radio"],
.ww-cardified input[type="checkbox"]{
  position:absolute!important; opacity:0!important; pointer-events:none!important;
}

/* image-based choices / gifs */
.ww-answer-card.has-image .ww-answer-media,
.ww-cardified label.has-image .ww-answer-media{ width:78px; height:78px; border-radius:20px; }
.ww-floaty,
.ww-gamify-float{ animation:ww-float 5.5s ease-in-out infinite; }
.ww-pop-in{ animation:ww-pop .34s cubic-bezier(.2,.8,.2,1); }
.ww-sparkle{ position:relative; }
.ww-sparkle::before,
.ww-sparkle::after{ content:"✦"; position:absolute; font-size:12px; color:#38bdf8; opacity:.8; animation:ww-twinkle 1.8s ease-in-out infinite; }
.ww-sparkle::before{ right:-4px; top:-5px; }
.ww-sparkle::after{ left:-2px; bottom:-7px; animation-delay:.4s; }

/* ---------- question text / sections ---------- */
.ww-section-intro,
.question-boilerplate .ww-soft,
.ww-panel{
  border:1px solid var(--ww-border);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--ww-shadow-soft);
}
.ww-panel{ padding:18px; }
.question-title,
.ls-question .question-text,
.question-container .q-text,
.question-container .question-text{
  color:var(--ww-text);
  font-weight:950;
  line-height:1.35;
}
.questionhelp,
.ls-questionhelp,
.em-tip{
  color:var(--ww-sub);
  font-size:13px;
  line-height:1.6;
}
.mandatoryasterisk{ color:var(--ww-danger)!important; }

/* ---------- buttons ---------- */
.btn,
input[type="submit"],
button[type="submit"],
.ls-move-btn,
#ls-button-submit,
#movenextbtn,
#moveprevbtn{
  border-radius:14px!important;
  font-weight:900!important;
  letter-spacing:.01em;
  transition:transform var(--ww-transition), box-shadow var(--ww-transition), filter var(--ww-transition);
}
.btn-primary,
#movenextbtn,
#ls-button-submit{
  background:linear-gradient(135deg,#111827,#1d4ed8)!important;
  border-color:#1d4ed8!important;
  box-shadow:0 12px 28px rgba(29,78,216,.22);
}
.btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
#movenextbtn:hover,
#ls-button-submit:hover{
  transform:translateY(-1px);
  filter:saturate(1.04);
}

/* ---------- result cards / premium reports ---------- */
#ww-report,
.ww-report,
.ww-results-shell{ color:var(--ww-text); }
.ww-report-box,
.ww-box{
  background:#fff;
  border:1px solid var(--ww-border);
  border-radius:30px;
  box-shadow:var(--ww-shadow);
  overflow:hidden;
}
.ww-report-header,
.ww-header{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start;
  padding:24px;
  background:linear-gradient(135deg, rgba(29,78,216,.10), rgba(20,184,166,.06));
  border-bottom:1px solid var(--ww-border);
}
.ww-title-xl,
.ww-title{ font-size:clamp(28px,4vw,40px); font-weight:1000; line-height:1.05; letter-spacing:-.04em; }
.ww-grid-2,
.ww-grid2{ display:grid; grid-template-columns:1.1fr .9fr; gap:14px; padding:18px 24px; }
.ww-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ww-kpis,.ww-stats-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.ww-kpi,.ww-stat-card{
  background:#fff; border:1px solid var(--ww-border); border-radius:18px; padding:14px 16px;
}
.ww-k,.ww-stat-label{ font-size:11px; color:#64748b; font-weight:800; }
.ww-v,.ww-stat-value{ margin-top:4px; font-size:18px; font-weight:950; display:flex; align-items:center; gap:8px; }
.ww-dot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
.ww-score-ring{
  --p:72; --size:160px;
  width:var(--size); height:var(--size); border-radius:50%;
  background:conic-gradient(var(--ww-primary) calc(var(--p) * 1%), #e2e8f0 0);
  display:grid; place-items:center; position:relative; margin-inline:auto;
  box-shadow:0 18px 38px rgba(29,78,216,.14);
}
.ww-score-ring::before{
  content:""; position:absolute; inset:13px; border-radius:50%; background:#fff;
}
.ww-score-ring > div{ position:relative; text-align:center; z-index:1; }
.ww-score-number{ font-size:34px; font-weight:1000; line-height:1; }
.ww-score-label{ font-size:12px; color:#64748b; font-weight:800; margin-top:6px; }
.ww-axis,
.ww-axis-card{ margin-top:10px; }
.ww-axis-row{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; font-weight:900;
}
.ww-bar,
.ww-barbg{ margin-top:8px; height:12px; border-radius:999px; background:#e2e8f0; overflow:hidden; }
.ww-bar > span,
.ww-barbg > span{
  position:relative; display:block; height:12px; border-radius:999px; background:linear-gradient(90deg,var(--ww-primary),var(--ww-accent));
}
.ww-bar > span::after,
.ww-barbg > span::after{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); animation:ww-sheen 2.4s linear infinite;
}
.ww-list{ margin:0; padding-left:18px; color:var(--ww-sub); font-size:14px; line-height:1.75; }
.ww-p{ color:var(--ww-sub); line-height:1.8; }
.ww-actions{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding:0 24px 24px; }
.ww-btn{
  border:0; border-radius:14px; padding:12px 16px; font-weight:950; cursor:pointer;
  transition:transform var(--ww-transition),box-shadow var(--ww-transition);
}
.ww-btn:hover{ transform:translateY(-1px); }
.ww-primary{ background:#111827; color:#fff; box-shadow:0 14px 28px rgba(15,23,42,.18); }
.ww-softbtn{ background:#eef2f7; color:#111827; }
.ww-cta-banner{
  margin:0 24px 24px; padding:18px; border-radius:22px; color:#fff; background:var(--ww-grad-main); box-shadow:0 18px 40px rgba(15,23,42,.16);
}
.ww-watermark::before{
  content:"WEISEWELT"; position:absolute; inset:auto 10px 8px auto; font-size:10px; letter-spacing:.3em; color:rgba(15,23,42,.14); font-weight:1000;
}

/* ---------- confetti ---------- */
.ww-confetti-host{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:9999; }
.ww-confetti-piece{
  position:absolute; width:10px; height:16px; border-radius:3px; opacity:.92;
  animation:ww-confetti-fall 1700ms linear forwards;
}

/* ---------- motion opt-out ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* ---------- print ---------- */
@media print{
  .navigator,.progress-bar,.ls-progress,.questionhelp,.ls-questionhelp,.btn,.ww-progress-wrap,.ww-actions,.navbar,.top-container,.bottom-container{ display:none!important; }
  body{ background:#fff!important; }
  .ww-report-box,.ww-box,.ww-card,.ww-soft-card,.ww-panel{ box-shadow:none!important; }
  #ww-report,.ww-report,.ww-results-shell{ max-width:none!important; margin:0!important; padding:0!important; }
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .ww-grid-2,.ww-grid2{ grid-template-columns:1fr; }
  .ww-grid-3{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .ww-hero{ padding:18px; border-radius:24px; }
  .ww-answer-card,
  .ww-cardified label{ padding:14px; border-radius:18px; }
  .ww-answer-media{ width:48px; height:48px; border-radius:16px; }
  .ww-answer-card.has-image .ww-answer-media,
  .ww-cardified label.has-image .ww-answer-media{ width:68px;height:68px; }
  .ww-report-header,.ww-header,.ww-grid2,.ww-grid-2,.ww-actions{ padding-left:16px; padding-right:16px; }
}

/* ---------- animations ---------- */
@keyframes ww-float{
  0%,100%{ transform:translateY(0px); }
  50%{ transform:translateY(-8px); }
}
@keyframes ww-pop{
  0%{ transform:scale(.96); opacity:.65; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes ww-twinkle{
  0%,100%{ transform:scale(.8); opacity:.35; }
  50%{ transform:scale(1.12); opacity:1; }
}
@keyframes ww-sheen{
  from{ transform:translateX(-120%); }
  to{ transform:translateX(120%); }
}
@keyframes ww-confetti-fall{
  0%{ transform:translate3d(0,-10vh,0) rotate(0deg); opacity:1; }
  100%{ transform:translate3d(var(--dx,40px),110vh,0) rotate(580deg); opacity:0; }
}


/* =========================================================
   WW Premium Results Add-ons: Tabs + Semáforo + Charts + Tables
   (Reusable across all evaluations)
   ========================================================= */

.ww-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}
.ww-tab{
  appearance:none;
  border:1px solid var(--ww-border);
  background:#fff;
  color:var(--ww-text);
  padding:8px 12px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  cursor:pointer;
  transition:var(--ww-transition);
}
.ww-tab:hover{
  transform:translateY(-1px);
  box-shadow:var(--ww-shadow-soft);
  border-color:rgba(29,78,216,.25);
}
.ww-tab[aria-selected="true"]{
  background:var(--ww-grad-soft);
  border-color:rgba(29,78,216,.35);
}
.ww-tabpanels{ margin-top:12px; }
.ww-panel{ display:none; }
.ww-panel.active{ display:block; }

/* Semáforo */
.ww-traffic{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:var(--ww-radius-lg);
  border:1px solid var(--ww-border);
  background:#fff;
  box-shadow:var(--ww-shadow-soft);
}
.ww-traffic-lights{
  width:46px;
  padding:8px;
  border-radius:18px;
  background:#0f172a;
  box-shadow:inset 0 10px 18px rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:0 0 auto;
}
.ww-light{
  width:18px;height:18px;border-radius:999px;
  opacity:.22;
  background:#94a3b8;
}
.ww-light.red{ background:var(--ww-danger); }
.ww-light.yellow{ background:var(--ww-warning); }
.ww-light.green{ background:var(--ww-success); }
.ww-light.on{
  opacity:1;
  box-shadow:0 0 0 4px rgba(255,255,255,.10), 0 0 26px rgba(22,163,74,.40);
}
.ww-light.on.red{ box-shadow:0 0 0 4px rgba(255,255,255,.10), 0 0 26px rgba(220,38,38,.45); }
.ww-light.on.yellow{ box-shadow:0 0 0 4px rgba(255,255,255,.10), 0 0 26px rgba(217,119,6,.45); }

.ww-traffic-meta b{ font-weight:1000; }
.ww-traffic-meta .ww-p{ margin:4px 0 0 0; }

/* Bars (Charts) */
.ww-bars{ display:grid; gap:10px; margin-top:10px; }
.ww-barrow{
  border:1px solid var(--ww-border);
  border-radius:var(--ww-radius-md);
  padding:10px 12px;
  background:#fff;
}
.ww-barhead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:13px; font-weight:950;
}
.ww-barhead span{ color:#64748b; font-weight:900; }
.ww-barbg{
  margin-top:8px;
  height:10px;
  border-radius:999px;
  background:rgba(148,163,184,.25);
  overflow:hidden;
}
.ww-barfill{
  height:10px;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--ww-primary), var(--ww-accent));
  transition:width 600ms ease;
}

/* Donut (SVG) */
.ww-donut{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
}
.ww-donut svg{ width:160px; height:160px; }
.ww-legend{ display:grid; gap:8px; }
.ww-legend-item{
  display:flex; align-items:center; gap:8px;
  font-weight:900; font-size:13px; color:var(--ww-text);
}
.ww-swatch{ width:10px; height:10px; border-radius:999px; background:var(--ww-primary); }

/* Tables */
.ww-tablewrap{
  overflow:auto;
  border:1px solid var(--ww-border);
  border-radius:var(--ww-radius-md);
  background:#fff;
  box-shadow:var(--ww-shadow-soft);
}
.ww-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
.ww-table th{
  position:sticky; top:0;
  background:var(--ww-surface-2);
  border-bottom:1px solid var(--ww-border);
  padding:10px;
  text-align:left;
  font-weight:1000;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.ww-table td{
  border-bottom:1px solid rgba(15,23,42,.06);
  padding:10px;
  vertical-align:top;
}
.ww-table tr:nth-child(even) td{ background:#fcfdff; }

.ww-pill.good{ border-color:rgba(22,163,74,.25) !important; background:rgba(22,163,74,.08) !important; }
.ww-pill.warn{ border-color:rgba(217,119,6,.25) !important; background:rgba(217,119,6,.10) !important; }
.ww-pill.bad{ border-color:rgba(220,38,38,.25) !important; background:rgba(220,38,38,.08) !important; }



/* =========================================================
   WW Roadmap (Plan de carrera) — Interactive + Gamified
   Usage: add <div id="ww-roadmap" data-ww-roadmap-template="career"></div>
   ========================================================= */

#ww-roadmap, [data-ww-roadmap]{
  max-width:1120px;
  margin:18px auto 28px;
  padding:0 14px;
  color:var(--ww-text);
}

.ww-roadmap-box{
  background:#fff;
  border:1px solid var(--ww-border);
  border-radius:var(--ww-radius-xl);
  box-shadow:var(--ww-shadow-xl);
  overflow:hidden;
}

.ww-roadmap-head{
  padding:18px 22px;
  background:linear-gradient(135deg, rgba(29,78,216,.10), rgba(34,197,94,.10));
  border-bottom:1px solid var(--ww-border);
  display:flex;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.ww-roadmap-title{
  font-size:22px;
  font-weight:1000;
  letter-spacing:-.35px;
  margin:0;
}
.ww-roadmap-sub{
  margin-top:6px;
  color:var(--ww-sub);
  line-height:1.7;
  font-size:13px;
}
.ww-roadmap-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.ww-roadmap-meta .ww-pill{
  font-size:12px;
  padding:6px 10px;
}

.ww-roadmap-progress{
  padding:14px 22px 0;
}
.ww-roadmap-progress .ww-barbg{
  height:12px;
}
.ww-roadmap-progress .ww-barfill{
  height:12px;
}

.ww-roadmap-body{
  padding:18px 22px 20px;
}

.ww-roadmap-steps{
  position:relative;
  display:grid;
  gap:12px;
}

.ww-roadmap-steps:before{
  content:"";
  position:absolute;
  left:20px;
  top:10px;
  bottom:10px;
  width:2px;
  background:linear-gradient(180deg, rgba(29,78,216,.25), rgba(34,197,94,.25));
}

.ww-stepcard{
  position:relative;
  padding:14px 14px 14px 56px;
  border:1px solid var(--ww-border);
  border-radius:var(--ww-radius-lg);
  background:#fff;
  box-shadow:var(--ww-shadow-sm);
  overflow:hidden;
}

.ww-stepcard:hover{
  border-color:rgba(29,78,216,.28);
  box-shadow:0 14px 28px rgba(2,6,23,.10);
}

.ww-stepdot{
  position:absolute;
  left:10px;
  top:16px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:#0b1220;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 10px 22px rgba(2,6,23,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:1000;
  font-size:12px;
}

.ww-stepdot.good{ background:var(--ww-good); }
.ww-stepdot.warn{ background:var(--ww-warn); color:#0b1220; }
.ww-stepdot.bad{ background:var(--ww-bad); }

.ww-steprow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.ww-steptitle{
  font-weight:1000;
  letter-spacing:-.2px;
  margin:0;
  font-size:15px;
}
.ww-steptime{
  color:#64748b;
  font-size:12px;
  font-weight:900;
  margin-top:4px;
}
.ww-stepdesc{
  color:var(--ww-sub);
  font-size:13px;
  line-height:1.75;
  margin-top:8px;
  margin-bottom:0;
}

.ww-step-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.ww-mini-btn{
  border:1px solid var(--ww-border);
  background:#fff;
  padding:8px 10px;
  border-radius:12px;
  font-weight:950;
  font-size:12px;
  cursor:pointer;
  transition:transform .10s ease, box-shadow .10s ease;
}
.ww-mini-btn:hover{ transform:translateY(-1px); box-shadow:var(--ww-shadow-sm); }
.ww-mini-btn.primary{
  background:#0b1220;
  border-color:#0b1220;
  color:#fff;
}
.ww-mini-btn.disabled{
  opacity:.55;
  cursor:not-allowed;
}

.ww-step-more{
  margin-top:10px;
  display:none;
  border-top:1px dashed rgba(15,23,42,.14);
  padding-top:10px;
}
.ww-step-more.open{ display:block; }

.ww-step-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.ww-linkchip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--ww-border);
  background:#fff;
  font-weight:950;
  font-size:12px;
  text-decoration:none;
}
.ww-linkchip:hover{
  border-color:rgba(29,78,216,.35);
}

.ww-step-media{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.ww-step-media img, .ww-step-media video{
  max-width:160px;
  border-radius:16px;
  box-shadow:0 14px 28px rgba(2,6,23,.12);
}

.ww-roadmap-foot{
  padding:0 22px 18px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

@media (max-width: 520px){
  .ww-roadmap-steps:before{ left:16px; }
  .ww-stepcard{ padding-left:52px; }
  .ww-stepdot{ left:6px; }
}

/* Print: show roadmap clean */
@media print{
  #ww-roadmap, [data-ww-roadmap]{ max-width:none; padding:0; margin:0; }
  .ww-roadmap-box{ box-shadow:none; border:0; border-radius:0; }
  .ww-roadmap-foot{ display:none !important; }
}



/* =========================================================
   WW v6: AI output styling
   ========================================================= */
.ww-ai-out{
  border:1px solid var(--ww-border);
  border-radius: var(--ww-radius-md);
  padding: 12px 14px;
  background: rgba(15,23,42,.02);
}
.ww-ai-out .ww-h2{ margin-top:0 }
.ww-ai-out p{ margin: 0 0 10px 0; line-height:1.6; color: var(--ww-sub); }


/* =========================================================
   WW v8 Compatibility Layer for native LimeSurvey list-radio/list-checkbox
   Ensures card gamification even when markup is input + label siblings
   ========================================================= */
.ww-card .ls-answers ul,
.ww-card ul.ls-answers,
.ww-card .answers-list,
.ww-scale .ls-answers ul,
.ww-scale ul.ls-answers{
  list-style:none!important;
  padding-left:0!important;
  margin:0!important;
}
.ww-card .ls-answers li,
.ww-card li.answer-item,
.ww-scale .ls-answers li,
.ww-scale li.answer-item{
  position:relative;
  margin:12px 0!important;
}
.ww-card .ls-answers li > input[type="radio"],
.ww-card .ls-answers li > input[type="checkbox"],
.ww-card li.answer-item > input[type="radio"],
.ww-card li.answer-item > input[type="checkbox"],
.ww-scale .ls-answers li > input[type="radio"],
.ww-scale .ls-answers li > input[type="checkbox"]{
  position:absolute!important;
  inset:0 auto auto 0!important;
  opacity:0!important;
  pointer-events:none!important;
  width:1px!important;height:1px!important;
}
.ww-card .ls-answers li > label,
.ww-card li.answer-item > label,
.ww-scale .ls-answers li > label,
.ww-scale li.answer-item > label{
  position:relative;
  display:flex!important;
  gap:14px;
  align-items:flex-start;
  width:100%;
  padding:16px 16px 16px 52px;
  border-radius:20px;
  border:1px solid var(--ww-border);
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:var(--ww-shadow-soft);
  cursor:pointer;
  overflow:hidden;
  transition:transform var(--ww-transition), box-shadow var(--ww-transition), border-color var(--ww-transition), background var(--ww-transition);
}
.ww-card .ls-answers li > label::before,
.ww-card li.answer-item > label::before,
.ww-scale .ls-answers li > label::before,
.ww-scale li.answer-item > label::before{
  content:"";
  position:absolute;
  left:16px; top:18px;
  width:22px; height:22px;
  border-radius:999px;
  border:2px solid #cbd5e1;
  background:#fff;
  box-sizing:border-box;
  transition:all var(--ww-transition);
}
.ww-card .ls-answers li > label:hover,
.ww-card li.answer-item > label:hover,
.ww-scale .ls-answers li > label:hover,
.ww-scale li.answer-item > label:hover{
  transform:translateY(-2px);
  border-color:rgba(29,78,216,.28);
  box-shadow:0 18px 34px rgba(2,8,23,.11);
}
.ww-card .ls-answers li > input:checked + label,
.ww-card li.answer-item > input:checked + label,
.ww-scale .ls-answers li > input:checked + label,
.ww-scale li.answer-item > input:checked + label,
.ww-card .ls-answers li.ww-selected > label,
.ww-scale .ls-answers li.ww-selected > label{
  border-color:rgba(29,78,216,.45);
  background:linear-gradient(180deg,rgba(219,234,254,.72),rgba(240,249,255,.95));
  box-shadow:var(--ww-answer-ring),0 18px 34px rgba(29,78,216,.12);
}
.ww-card .ls-answers li > input:checked + label::before,
.ww-card li.answer-item > input:checked + label::before,
.ww-scale .ls-answers li > input:checked + label::before,
.ww-scale li.answer-item > input:checked + label::before{
  border-color:var(--ww-primary);
  background:var(--ww-primary);
  box-shadow:0 0 0 4px rgba(29,78,216,.10);
}
.ww-card .ls-answers li > input:checked + label::after,
.ww-card li.answer-item > input:checked + label::after,
.ww-scale .ls-answers li > input:checked + label::after,
.ww-scale li.answer-item > input:checked + label::after{
  content:"";
  position:absolute;
  left:23px; top:25px;
  width:8px;height:8px;border-radius:999px;background:#fff;
}
.ww-card .ww-opt, .ww-scale .ww-opt{ display:flex; gap:14px; align-items:flex-start; width:100%; }
.ww-card .ww-ico, .ww-scale .ww-ico{
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:linear-gradient(135deg,#eff6ff,#ecfeff);
  border:1px solid #dbeafe;
}
.ww-card .ww-dotbar, .ww-scale .ww-dotbar{ margin-left:auto; align-self:center; }
.ww-card .ww-ttl, .ww-scale .ww-ttl{ font-size:15px; font-weight:950; color:var(--ww-text); }
.ww-card .ww-desc, .ww-scale .ww-desc{ color:var(--ww-sub); line-height:1.55; }

/* stronger result polish */
.ww-balance-hero{position:relative;overflow:hidden;border-radius:30px;padding:28px;background:var(--ww-grad-main);color:#fff;box-shadow:0 24px 54px rgba(15,23,42,.18)}
.ww-balance-hero .ww-title-main{margin:10px 0 8px 0;font-size:clamp(28px,4vw,42px);line-height:1.05;font-weight:1000;letter-spacing:-.04em}
.ww-balance-hero .ww-lead{max-width:900px;color:rgba(255,255,255,.92);font-size:15px;line-height:1.7}
.ww-balance-hero .ww-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px}
.ww-balance-hero .ww-kpi{background:rgba(255,255,255,.14);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);color:#fff}
.ww-box h3{margin:0 0 10px 0;font-size:clamp(22px,2vw,30px);line-height:1.08;letter-spacing:-.03em}
.ww-summary-row{margin:0 0 12px 0}
.ww-summary-row .lbl{display:flex;justify-content:space-between;gap:12px;font-weight:900;margin-bottom:6px}
.ww-sema-banner{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:20px;background:#fff;border:1px solid var(--ww-border);box-shadow:var(--ww-shadow-soft)}
.ww-sema-banner .ww-lights{width:46px;padding:8px;border-radius:18px;background:#0f172a;display:flex;flex-direction:column;gap:8px}
.ww-sema-banner .ww-lights i{width:18px;height:18px;border-radius:999px;display:block;opacity:.3}
.ww-sema-banner .ww-lights .r{background:var(--ww-danger)}
.ww-sema-banner .ww-lights .o{background:var(--ww-warning)}
.ww-sema-banner .ww-lights .y{background:#eab308}
.ww-sema-banner .ww-lights .g{background:var(--ww-success)}
.ww-plan72{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ww-daycard{border:1px solid var(--ww-border);background:#fff;border-radius:20px;box-shadow:var(--ww-shadow-soft);padding:16px}
.ww-daycard h4{margin:0 0 8px 0;font-size:18px}
@media (max-width:900px){.ww-plan72{grid-template-columns:1fr}}


/* =========================================================
   WW v9 Enhancements: Toasts + Stronger Cards + Priority Highlight
   ========================================================= */

/* Toast notifications (level up / badge unlocked) */
.ww-toast-host{
  position:fixed;
  top:14px;
  right:14px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.ww-toast{
  pointer-events:none;
  max-width:min(360px, calc(100vw - 28px));
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 44px rgba(2,8,23,.14);
  display:flex;
  gap:10px;
  align-items:flex-start;
  animation:ww-toast-in .22s cubic-bezier(.2,.8,.2,1);
}
.ww-toast b{font-weight:1000;color:var(--ww-text)}
.ww-toast p{margin:0;color:var(--ww-sub);font-size:13px;line-height:1.45}
.ww-toast .ww-toast-ico{width:34px;height:34px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(29,78,216,.16), rgba(20,184,166,.10));
  border:1px solid rgba(29,78,216,.18);
  flex:0 0 auto;
}
@keyframes ww-toast-in{from{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Stronger answer card presence */
.ww-answer-card,
.ww-cardified label{
  background:
    radial-gradient(circle at 0% 0%, rgba(29,78,216,.10), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(20,184,166,.10), transparent 28%),
    linear-gradient(180deg,#fff,#fbfdff);
}
.ww-answer-card.is-selected,
.ww-cardified label.is-selected{
  background:
    radial-gradient(circle at 0% 0%, rgba(29,78,216,.16), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(20,184,166,.14), transparent 32%),
    linear-gradient(180deg,rgba(219,234,254,.72),rgba(240,249,255,.95));
}
.ww-answer-points{
  background:linear-gradient(135deg, rgba(29,78,216,.10), rgba(20,184,166,.10));
  border:1px solid rgba(29,78,216,.18);
}

/* Scale questions: keep cards compact and aligned */
.ww-scale .ww-answer-title{font-size:15px}
.ww-scale .ww-answer-desc{font-size:12.5px}
.ww-scale .ww-answer-media{width:52px;height:52px;border-radius:18px}
@media (min-width:960px){
  /* optional: 2-column layout for long questionnaires */
  .ww-scale.ww-cardified .ls-answers ul,
  .ww-scale.ww-cardified ul.ls-answers{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .ww-scale.ww-cardified .ls-answers li,
  .ww-scale.ww-cardified li.answer-item{margin:0}
}

/* Priority highlight in bars / table */
.ww-barrow.is-priority{
  border-color:rgba(220,38,38,.20);
  box-shadow:0 18px 34px rgba(220,38,38,.10);
  position:relative;
}
.ww-barrow.is-priority::before{
  content:"PRIORIDAD";
  position:absolute;
  top:10px;
  right:10px;
  font-size:10px;
  letter-spacing:.12em;
  font-weight:1000;
  color:#b91c1c;
  background:rgba(254,226,226,.85);
  border:1px solid rgba(220,38,38,.18);
  padding:5px 8px;
  border-radius:999px;
}

/* Report header: tighter & more premium */
.ww-report-header{
  gap:18px;
}
.ww-report-header .ww-chip{
  box-shadow:0 10px 22px rgba(15,23,42,.14);
}


/* Table priority row */
.ww-priority-row td{
  background:rgba(254,226,226,.35);
}


/* ===== v10 Enhancements ===== */

.ww-theme-v10 .ww-progress-group{
  font-weight:900;
  color:#0f172a;
  opacity:.88;
  margin-left:6px;
}
.ww-toast-host{
  position:fixed;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.ww-toast{
  pointer-events:none;
  opacity:0;
  transform:translateY(-6px) scale(.98);
  transition:220ms cubic-bezier(.2,.8,.2,1);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 18px 36px rgba(2,8,23,.16);
  border-radius:999px;
  padding:10px 14px;
  font-weight:950;
  color:#0f172a;
  min-width:240px;
  text-align:center;
}
.ww-toast.show{ opacity:1; transform:translateY(0) scale(1); }
.ww-toast.is-success{ border-color:rgba(34,197,94,.25); box-shadow:0 18px 36px rgba(34,197,94,.12); }
.ww-toast.is-info{ border-color:rgba(59,130,246,.25); }

/* Hide heavy LS blue bars and use our own hierarchy */
.group-title, .ls-group-title, .group-description, .ls-group-description{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.group-title h2, .ls-group-title h2, h2.group-title, h2.ls-group-title{
  font-weight:1000!important;
  letter-spacing:-.03em!important;
  padding:6px 0 0 0!important;
  margin:0 0 14px 0!important;
  color:#0f172a!important;
}

/* Answer cards: richer */
.ww-theme-v10 .ww-answer-card,
.ww-theme-v10 .ww-cardified label{
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 65%, rgba(219,234,254,.28) 100%);
}
.ww-theme-v10 .ww-answer-points{
  background:linear-gradient(90deg, rgba(29,78,216,.12), rgba(20,184,166,.12));
  border:1px solid rgba(29,78,216,.15);
}
.ww-theme-v10 .ww-answer-title{ font-size:16.5px; }
.ww-theme-v10 .ww-answer-desc{ font-size:13.3px; }
.ww-theme-v10 .ww-answer-media{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 24px rgba(2,8,23,.08);
}

/* Result header: more contrast and spacing */
.ww-theme-v10 .ww-report-header,
.ww-theme-v10 .ww-header{
  border-radius:30px;
}
.ww-theme-v10 .ww-kpi,
.ww-theme-v10 .ww-stat-card{
  background:linear-gradient(180deg,#fff, #f8fbff);
}
/* Make KPI text spacing readable in PDF */
.ww-theme-v10 .ww-v, .ww-theme-v10 .ww-stat-value{
  gap:10px;
}

@media print{
  .ww-toast-host{ display:none!important; }
  .ww-theme-v10 .ww-report-header{ padding:18px!important; }
  .ww-theme-v10 .ww-kpis{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
}



/* =========================================================
   Weisewelt v10.2 – Question header card + remove blue bars
   (Fixes: question-title-container backgrounds not matching)
   ========================================================= */
.question-title-container,
.ls-question .question-title-container,
.ls-question .question-text-container,
.ls-question .ls-question-text-container,
.ls-question .question-heading-container{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0 0 10px 0!important;
}

/* turn the visible question text into a premium "prompt card" */
.question-title-container .question-text,
.ls-question .question-title-container .question-text,
.ls-question .question-text,
.question-container .question-text{
  display:block!important;
  background:linear-gradient(180deg,#ffffff,#fbfdff)!important;
  border:1px solid var(--ww-border)!important;
  border-radius:22px!important;
  padding:16px 16px!important;
  box-shadow:var(--ww-shadow-soft)!important;
  position:relative!important;
}

.question-title-container .question-text::before,
.ls-question .question-text::before,
.question-container .question-text::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:8px;
  border-radius:22px 0 0 22px;
  background:linear-gradient(180deg,var(--ww-primary),var(--ww-accent));
  opacity:.92;
}

/* remove the extra inner "stripe" some bootswatch variants add */
.question-title-container .question-text > *{
  background:transparent!important;
}

/* the small helper bar "Seleccione..." */
.question-title-container .ls-questionhelp,
.question-title-container .questionhelp,
.ls-questionhelp, .questionhelp{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:8px 0 0 0!important;
}

/* Make ww-scale options feel like true cards (even without ww-cardified runtime) */
.ww-card .ls-answers li label,
.ww-card li.answer-item label{
  border-radius:22px!important;
  box-shadow:var(--ww-shadow-soft)!important;
}
.ww-card .ls-answers li label:hover,
.ww-card li.answer-item label:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(29,78,216,.35)!important;
  box-shadow:0 18px 34px rgba(2,8,23,.11)!important;
}
/* selection state when survey marks li.ww-selected */
.ww-card li.ww-selected label,
.ww-card li.answer-item.ww-selected label{
  border-color:rgba(34,197,94,.65)!important;
  background:linear-gradient(180deg,#f0fdf4,#ffffff)!important;
  box-shadow:0 26px 46px rgba(34,197,94,.14)!important;
}

/* turn the 0/4 pills into badges */
.ww-dotbar small{
  background:#eef2ff;
  border:1px solid #c7d2fe;
  border-radius:999px;
  padding:3px 8px;
}
.ww-card li.ww-selected .ww-dotbar small{
  background:#dcfce7;
  border-color:rgba(34,197,94,.55);
}

/* Optional: hide native radio circle (keep accessible input) */
.ww-card input[type="radio"], .ww-card input[type="checkbox"]{
  opacity:.12!important;
}

/* Center question wrappers more consistently */
.question-container, .ls-question{
  max-width:1120px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}


/* ===== v10.2 scale badges (visual gamification without emoji) =====
   Works when LI has classes like: answer-item-0 ... answer-item-4
*/
.ww-card .ls-answers li label::before,
.ww-card li.answer-item label::before{
  content:"";
  width:44px;height:44px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(135deg,#f1f5f9,#ffffff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
  flex:0 0 auto;
  margin-top:2px;
}

/* 0..4 colors */
.ww-card .answer-item-0 label::before{ background:linear-gradient(135deg,#fee2e2,#fff); border-color:rgba(239,68,68,.35); }
.ww-card .answer-item-1 label::before{ background:linear-gradient(135deg,#ffedd5,#fff); border-color:rgba(249,115,22,.35); }
.ww-card .answer-item-2 label::before{ background:linear-gradient(135deg,#fef3c7,#fff); border-color:rgba(245,158,11,.35); }
.ww-card .answer-item-3 label::before{ background:linear-gradient(135deg,#dcfce7,#fff); border-color:rgba(34,197,94,.35); }
.ww-card .answer-item-4 label::before{ background:linear-gradient(135deg,#bbf7d0,#fff); border-color:rgba(22,163,74,.35); }

/* selected: glow the badge */
.ww-card li.ww-selected.answer-item-0 label::before{ box-shadow:0 0 0 4px rgba(239,68,68,.12), inset 0 1px 0 rgba(255,255,255,.85); }
.ww-card li.ww-selected.answer-item-1 label::before{ box-shadow:0 0 0 4px rgba(249,115,22,.12), inset 0 1px 0 rgba(255,255,255,.85); }
.ww-card li.ww-selected.answer-item-2 label::before{ box-shadow:0 0 0 4px rgba(245,158,11,.12), inset 0 1px 0 rgba(255,255,255,.85); }
.ww-card li.ww-selected.answer-item-3 label::before{ box-shadow:0 0 0 4px rgba(34,197,94,.12), inset 0 1px 0 rgba(255,255,255,.85); }
.ww-card li.ww-selected.answer-item-4 label::before{ box-shadow:0 0 0 4px rgba(22,163,74,.12), inset 0 1px 0 rgba(255,255,255,.85); }

/* make titles slightly bigger */
.ww-ttl{ font-size:16px!important; }
.ww-desc{ font-size:13px!important; }