:root{
  --vpui-navy:#071421;
  --vpui-navy2:#0b1e30;
  --vpui-card:#0f2a43;
  --vpui-border:rgba(255,255,255,.10);
  --vpui-text:rgba(255,255,255,.88);
  --vpui-muted:rgba(255,255,255,.62);
  --vpui-gold:#d4af37;
  --vpui-gold2:#f2d37b;
  --vpui-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.vpui-wrap{
  background: radial-gradient(1200px 600px at 50% -200px, rgba(212,175,55,.18), transparent 60%),
              linear-gradient(180deg, var(--vpui-navy) 0%, #06101a 100%);
  min-height: 100vh;
  color: var(--vpui-text);
}

.vpui-container{
  width: min(1140px, calc(100% - 32px));
  margin: 0 auto;
}

.vpui-topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7,20,33,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vpui-border);
}

.vpui-topbar-inner{
  height: 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.vpui-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.vpui-logo{ height: 40px; width:auto; display:block; }

.vpui-nav{
  display:none;
  gap: 6px;
  align-items:center;
}
@media (min-width: 992px){
  .vpui-nav{ display:flex; }
}

/* Preproducción: el menú ocupa el hueco central y puede estrecharse; lo que no
   cabe lo pasa vp-campus-ui.js a «Más». La marca y el menú de usuario no se
   encogen nunca: el usuario siempre se ve (992-1920 px). */
.vpui-brand,
.vpui-user{ flex: 0 0 auto; }
.vpui-nav{
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
.vpui-nav-items{
  display:flex;
  gap: 6px;
  align-items:center;
  min-width: 0;
  overflow: hidden;
}
.vpui-nav-items .vpui-nav-link{ flex: 0 0 auto; white-space: nowrap; }
.vpui-user-name{
  display:inline-block;
  max-width: 180px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
/* En pantallas grandes la barra aprovecha el ancho (el contenido sigue en 1140 px): caben casi todos los ítems. */
@media (min-width: 1440px){
  .vpui-topbar .vpui-topbar-inner{ width: min(1600px, calc(100% - 48px)); }
}
.vpui-nav-more{ position: relative; flex: 0 0 auto; }
.vpui-nav-more[hidden]{ display:none; }
.vpui-nav-more__btn{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: rgba(255,255,255,.75);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  white-space: nowrap;
  transition: all .15s ease;
}
.vpui-nav-more__btn:hover,
.vpui-nav-more.is-open .vpui-nav-more__btn{
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.08);
}
.vpui-nav-more.is-active .vpui-nav-more__btn{
  color: #0b1e30;
  background: rgba(212,175,55,.95);
}
.vpui-nav-more.has-notification .vpui-nav-more__btn{ position: relative; }
.vpui-nav-more.has-notification .vpui-nav-more__btn::after{
  content: "";
  position: absolute;
  top: 7px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff7a45;
}
.vpui-nav-more__btn:focus-visible{ outline: 2px solid rgba(212,175,55,.95); outline-offset: 2px; }
.vpui-nav-more__menu{
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 200px;
  flex-direction: column;
  gap: 2px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,20,33,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  padding: 8px;
  z-index: 9999;
}
.vpui-nav-more.is-open .vpui-nav-more__menu{ display: flex; }
.vpui-nav-more__menu .vpui-nav-link{ display: block; white-space: nowrap; }

.vpui-nav-link{
  color: rgba(255,255,255,.75);
  text-decoration:none;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: all .15s ease;
}
.vpui-nav-link:hover{
  color: rgba(255,255,255,.95);
  background: rgba(255,255,255,.08);
}
.vpui-nav-link.is-active{
  color: #0b1e30;
  background: rgba(212,175,55,.95);
}

.vpui-user{
  display:flex; align-items:center; justify-content:flex-end;
}

.vpui-user-menu{ position: relative; }

.vpui-user-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border: 1px solid var(--vpui-border);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  font-size: 13px;
  color: rgba(255,255,255,.80);
  text-decoration:none;

  /* para que funcione bien como <button> */
  appearance: none;
  cursor: pointer;
  font: inherit;
}

.vpui-user-pill:hover{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
}

.vpui-user-dropdown{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 180px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,20,33,.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  padding: 8px;
  display: none;
  z-index: 9999;
}

.vpui-user-menu.is-open .vpui-user-dropdown{ display:block; }

.vpui-user-item{
  display:block;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.85);
  text-decoration:none;
  font-weight: 700;
}

.vpui-user-item:hover{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
}

.vpui-user-item:last-child{
  color: rgba(255,120,120,.95);
}
.vpui-main{
  padding: 28px 0 56px;
}

.vpui-hero{
  padding: 22px 0 10px;
}
.vpui-hero-badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(212,175,55,.10);
  color: var(--vpui-gold2);
  font-size: 12px;
  font-weight: 700;
}
.vpui-h1{
  margin: 12px 0 6px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
}
.vpui-subtitle{
  margin: 0;
  color: var(--vpui-muted);
  font-size: 15px;
  max-width: 720px;
}

.vpui-stats{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 992px){
  .vpui-stats{ grid-template-columns: repeat(4, 1fr); }
}
.vpui-stat{
  background: rgba(255,255,255,.04);
  border: 1px solid var(--vpui-border);
  border-radius: 14px;
  padding: 14px;
}
.vpui-stat-value{
  font-size: 22px;
  font-weight: 800;
}
.vpui-stat-label{
  font-size: 12px;
  color: var(--vpui-muted);
  margin-top: 2px;
}

.vpui-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px){
  .vpui-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
  .vpui-grid{ grid-template-columns: repeat(4, 1fr); }
}

.vpui-card{
  text-decoration:none;
  color: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--vpui-border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vpui-card:hover{
  transform: translateY(-2px);
  border-color: rgba(212,175,55,.35);
  box-shadow: var(--vpui-shadow);
}

.vpui-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.vpui-card-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--vpui-gold);
  background: rgba(212,175,55,.10);
  border: 1px solid rgba(212,175,55,.22);
}
.vpui-card-badge{
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,.78);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--vpui-border);
}
.vpui-card-title{
  font-size: 16px;
  font-weight: 800;
  margin: 6px 0 6px;
}
.vpui-card-desc{
  font-size: 13px;
  color: var(--vpui-muted);
  line-height: 1.45;
  min-height: 38px;
}
.vpui-card-cta{
  margin-top: 12px;
  font-weight: 800;
  color: var(--vpui-gold2);
}

.vpui-note{
  margin-top: 18px;
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,.25);
  background: rgba(212,175,55,.08);
  padding: 16px;
}
.vpui-note-title{
  font-weight: 900;
  margin-bottom: 6px;
}
.vpui-note-text{
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.5;
}

.vpui-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(212,175,55,.95);
  color: #0b1e30;
  font-weight: 900;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.1);
}
.vpui-btn:hover{ filter: brightness(1.02); }
/* Si estás logueado, evita que la barra de admin tape el topbar */
body.admin-bar .vpui-topbar { top: 32px; }
@media (max-width: 782px){
  body.admin-bar .vpui-topbar { top: 46px; }
}

/* Un poco más ancho en pantallas grandes */
.vpui-container{
  width: min(1280px, calc(100% - 32px));
}
.vpui-search{ margin-top: 16px; }
.vpui-input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.90);
  outline: none;
}
.vpui-input::placeholder{ color: rgba(255,255,255,.45); }
.vpui-input:focus{
  border-color: rgba(212,175,55,.40);
  box-shadow: 0 0 0 4px rgba(212,175,55,.10);
}

.vpui-actions{ margin-top: 12px; }
.vpui-btn-outline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-weight: 800;
}
.vpui-btn-outline:hover{
  border-color: rgba(212,175,55,.35);
  color: rgba(255,255,255,.95);
}

.vpui-list{ margin-top: 16px; display:flex; flex-direction:column; gap: 10px; }
.vpui-list-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  text-decoration:none;
  color: inherit;
}
.vpui-list-item:hover{
  border-color: rgba(212,175,55,.30);
  background: rgba(255,255,255,.06);
}
.vpui-list-title{ font-weight: 900; }
.vpui-list-cta{ font-weight: 900; color: rgba(242,211,123,.95); }

/* Paso 7: la fila del listado deja de ser un único <a> — la zona de título
   sigue llevando al quiz y la columna de acciones suma "Revisar último
   intento" (fantasma) junto al CTA de siempre. */
.vpui-list-link{ text-decoration:none; color:inherit; flex:1 1 auto; min-width:0; }
a.vpui-list-cta{ text-decoration:none; white-space:nowrap; }
.vpui-list-ctas{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
  flex:0 0 auto;
}
.vpui-list-review{
  font-weight:700;
  font-size:13px;
  color:rgba(242,211,123,.70);
  text-decoration:none;
  white-space:nowrap;
  border:1px solid transparent;
  border-radius:999px;
  padding:6px 12px;
  transition:color .22s ease, border-color .22s ease, background .22s ease;
}
.vpui-list-review:hover{
  color:rgba(242,211,123,.95);
  border-color:rgba(212,175,55,.35);
  background:rgba(212,175,55,.08);
}
@media (max-width: 640px){
  .vpui-list-item{ flex-wrap:wrap; }
  .vpui-list-ctas{ width:100%; justify-content:flex-start; }
}
.vpui-content > * { max-width: 100%; }
.vpui-content img { max-width: 100%; height: auto; }
/* Panel oscuro para módulos funcionales (Generador / Falladas) */
.vpui-module{
  margin-top: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  color: rgba(255,255,255,.88);
}
/* Evita fondos blancos heredados SIN romper selects/options */
.vpui-module{
  color: rgba(255,255,255,.88);
}

/* Solo neutralizamos fondos típicos (no todo con *) */
.vpui-module table,
.vpui-module th,
.vpui-module td,
.vpui-module .wrap,
.vpui-module .container,
.vpui-module .card{
  background: transparent;
}

/* Inputs y selects */
.vpui-module select{
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* Opciones del desplegable (cuando se abre) */
.vpui-module select option{
  background: #0b1e30 !important; /* navy */
  color: rgba(255,255,255,.95) !important;
}
/* Tablas (el generador parece usar tabla) */
.vpui-module table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  color: rgba(255,255,255,.85);
}

.vpui-module th,
.vpui-module td{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  vertical-align: middle;
}

.vpui-module tr:hover td{
  background: rgba(255,255,255,.03) !important;
}

/* Inputs / selects */
.vpui-module input[type="text"],
.vpui-module input[type="number"],
.vpui-module input[type="email"],
.vpui-module input[type="password"],
.vpui-module select,
.vpui-module textarea{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.90) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  outline: none;
}

.vpui-module input:focus,
.vpui-module select:focus,
.vpui-module textarea:focus{
  border-color: rgba(212,175,55,.40) !important;
  box-shadow: 0 0 0 4px rgba(212,175,55,.10) !important;
}

/* Checkbox un poco más “tocable” */
.vpui-module input[type="checkbox"]{
  transform: scale(1.1);
}
.vpui-module-generador td:nth-child(2) input[type="checkbox"]{
  display: block !important;
  margin: 0 auto !important;
}

/* Botones genéricos.
   Doble exclusión del saneado, siempre con :where() (especificidad CERO,
   la cascada de los módulos actuales queda exactamente igual; :not() a
   secas subiría (0,1,x)→(0,2,x) e invertiría reglas de módulo (0,2,0)
   como el padding de .vpui-module-generador button o los bloques de
   resultados de quiz en vp-quiz-dress.css):
   1) :where(:not(.vpr-shell)) — el módulo que envuelve un runner.
   2) :where(:not(.vpr, .vpr *)) — el contenido de un runner ANIDADO en
      otro módulo sin vpr-shell (SPAs bajo render_campus_shell: Simulacros,
      Flash Cards, BAÚL…): la protección la da el propio .vpr. */
.vpui-module:where(:not(.vpr-shell)) button:where(:not(.vpr, .vpr *)),
.vpui-module:where(:not(.vpr-shell)) input[type="submit"]:where(:not(.vpr, .vpr *)),
.vpui-module:where(:not(.vpr-shell)) .button:where(:not(.vpr, .vpr *)),
.vpui-module:where(:not(.vpr-shell)) a.button:where(:not(.vpr, .vpr *)){
  background: rgba(212,175,55,.95) !important;
  color: #0b1e30 !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
  cursor: pointer;
}

.vpui-module:where(:not(.vpr-shell)) button:where(:not(.vpr, .vpr *)):hover,
.vpui-module:where(:not(.vpr-shell)) input[type="submit"]:where(:not(.vpr, .vpr *)):hover,
.vpui-module:where(:not(.vpr-shell)) .button:where(:not(.vpr, .vpr *)):hover{
  filter: brightness(1.03);
}

/* Links */
.vpui-module:where(:not(.vpr-shell)) a:where(:not(.vpr, .vpr *)){
  color: rgba(242,211,123,.95);
}
.vpui-module:where(:not(.vpr-shell)) a:where(:not(.vpr, .vpr *)):hover{
  color: rgba(242,211,123,1);
}

/* Evita desbordes */
.vpui-content > * { max-width: 100%; }
.vpui-module img { max-width: 100%; height: auto; }
/* ✅ Fuerza modo oscuro en controles nativos (select dropdown incluido) */
.vpui-wrap,
.vpui-module{
  color-scheme: dark;
}

/* Quita fondos blancos, pero NO rompas controles (ni el runner: .vpr) */
.vpui-module:where(:not(.vpr-shell)) *:not(select):not(option):not(button):not(input):not(textarea):where(:not(.vpr, .vpr *)){
  background-color: transparent !important;
}

/* ✅ Asegura legibilidad de tablas */
.vpui-module table,
.vpui-module th,
.vpui-module td{
  color: rgba(255,255,255,.88) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* ✅ Select y desplegable */
.vpui-module select{
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

.vpui-module select option{
  background: #0b1e30 !important;
  color: #ffffff !important;
}

/* ✅ Inputs (por si alguno se queda raro) */
.vpui-module input[type="text"],
.vpui-module input[type="number"],
.vpui-module input[type="email"],
.vpui-module input[type="password"],
.vpui-module textarea{
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  display: block !important;
  margin: 0 auto !important;
}
/* Botón principal del generador (incluye "Empezar test").
   :where(:not(.vpr, .vpr *)): mismo gate del saneado genérico (Paso 4 —
   el builder nuevo del Generador vive en esta página como .vpr y pinta
   sus propios botones; el generador viejo no lleva .vpr y no cambia). */
.vpui-module-generador input[type="submit"]:where(:not(.vpr, .vpr *)),
.vpui-module-generador input[type="button"]:where(:not(.vpr, .vpr *)),
.vpui-module-generador button:where(:not(.vpr, .vpr *)),
.vpui-module-generador .button:where(:not(.vpr, .vpr *)),
.vpui-module-generador a.button:where(:not(.vpr, .vpr *)),
.vpui-module-generador input[value*="Empezar"]:where(:not(.vpr, .vpr *)),
.vpui-module-generador input[value*="Comenzar"]:where(:not(.vpr, .vpr *)){
  background: rgba(212,175,55,.95) !important;
  color: #0b1e30 !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
}

.vpui-module-generador input[type="submit"]:where(:not(.vpr, .vpr *)):hover,
.vpui-module-generador input[type="button"]:where(:not(.vpr, .vpr *)):hover,
.vpui-module-generador button:where(:not(.vpr, .vpr *)):hover,
.vpui-module-generador .button:where(:not(.vpr, .vpr *)):hover,
.vpui-module-generador a.button:where(:not(.vpr, .vpr *)):hover{
  filter: brightness(1.05) !important;
}
/* ===== PMPro Corporate ===== */
.vpui-module .pmpro_btn,
.vpui-module input.pmpro_btn,
.vpui-module .pmpro_btn-submit,
.vpui-module #pmpro_btn-submit,
.vpui-module button.pmpro_btn{
  background: rgba(212,175,55,.95) !important;
  color: #0b1e30 !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-weight: 900 !important;
}

.vpui-module .pmpro_btn:hover,
.vpui-module input.pmpro_btn:hover{
  filter: brightness(1.05) !important;
}

.vpui-module .pmpro_table,
.vpui-module table.pmpro_table{
  width: 100%;
  border-color: rgba(255,255,255,.10) !important;
}

.vpui-module .pmpro_message{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.85) !important;
}
.vpui-module .pmpro_message.pmpro_error{ border-color: rgba(255,80,80,.35) !important; }
.vpui-module .pmpro_message.pmpro_success{ border-color: rgba(80,200,140,.35) !important; }
/* ===== PMPro: forzar tipografía legible en fondo oscuro ===== */
.vpui-module-planes,
.vpui-module-cuenta,
.vpui-module-acceso{
  color: rgba(255,255,255,.88) !important;
}

/* Textos típicos PMPro */
.vpui-module-planes p,
.vpui-module-planes li,
.vpui-module-planes label,
.vpui-module-planes legend,
.vpui-module-planes th,
.vpui-module-planes td,
.vpui-module-planes small,
.vpui-module-planes .pmpro_checkout,
.vpui-module-planes .pmpro_message,

.vpui-module-cuenta p,
.vpui-module-cuenta li,
.vpui-module-cuenta label,
.vpui-module-cuenta legend,
.vpui-module-cuenta th,
.vpui-module-cuenta td,
.vpui-module-cuenta small,
.vpui-module-cuenta .pmpro_message,

.vpui-module-acceso p,
.vpui-module-acceso li,
.vpui-module-acceso label,
.vpui-module-acceso legend,
.vpui-module-acceso small{
  color: rgba(255,255,255,.85) !important;
}

/* Títulos */
.vpui-module-planes h1,
.vpui-module-planes h2,
.vpui-module-planes h3,
.vpui-module-planes h4,
.vpui-module-planes h5,
.vpui-module-planes h6,

.vpui-module-cuenta h1,
.vpui-module-cuenta h2,
.vpui-module-cuenta h3,
.vpui-module-cuenta h4,
.vpui-module-cuenta h5,
.vpui-module-cuenta h6,

.vpui-module-acceso h1,
.vpui-module-acceso h2,
.vpui-module-acceso h3,
.vpui-module-acceso h4,
.vpui-module-acceso h5,
.vpui-module-acceso h6{
  color: rgba(255,255,255,.95) !important;
}

/* Links (ej: "desconecta ahora") */
.vpui-module-planes a,
.vpui-module-cuenta a,
.vpui-module-acceso a{
  color: rgba(242,211,123,.95) !important;
}
.vpui-module-planes a:hover,
.vpui-module-cuenta a:hover,
.vpui-module-acceso a:hover{
  color: rgba(242,211,123,1) !important;
}

/* Bloques/cajas PMPro que a veces traen fondo blanco */
.vpui-module-planes .pmpro_checkout,
.vpui-module-planes .pmpro_checkout-field,
.vpui-module-planes .pmpro_checkout-fields,
.vpui-module-cuenta .pmpro_box,
.vpui-module-cuenta .pmpro_table,
.vpui-module-cuenta .pmpro_actionlinks{
  background: transparent !important;
}
/* ===== LearnDash Profile ([ld_profile]) corporativo ===== */
.vpui-module-progreso .ld-profile-summary,
.vpui-module-progreso .ld-item-list,
.vpui-module-progreso .ld-item-list-item,
.vpui-module-progreso .ld-table-list{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
}

.vpui-module-progreso .ld-item-list-item{
  padding: 12px 14px !important;
}

.vpui-module-progreso .ld-item-title,
.vpui-module-progreso .ld-item-name,
.vpui-module-progreso .ld-profile-summary .ld-profile-card-title{
  color: rgba(255,255,255,.95) !important;
  font-weight: 900 !important;
}

.vpui-module-progreso .ld-item-details,
.vpui-module-progreso .ld-item-meta,
.vpui-module-progreso .ld-profile-summary .ld-profile-card-subtitle{
  color: rgba(255,255,255,.70) !important;
}

.vpui-module-progreso a{
  color: rgba(242,211,123,.95) !important;
}
.vpui-module-progreso a:hover{
  color: rgba(242,211,123,1) !important;
}
/* ===========================
   FIX MODAL ESTADÍSTICAS LD/ProQuiz (solo en Mi Progreso)
   =========================== */

/* Overlay oscuro por encima del topbar */
.vpui-module-progreso #wpProQuiz_overlay,
.vpui-module-progreso .wpProQuiz_overlay,
.vpui-module-progreso .wpProQuiz_modal_backdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.65) !important;
  z-index: 99990 !important;
}

/* Ventana modal centrada, sin superposición rara */
.vpui-module-progreso .wpProQuiz_modal_window,
.vpui-module-progreso #wpProQuiz_modal_window,
.vpui-module-progreso .wpProQuiz_statistics{
  position: fixed !important;
  top: 90px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: min(1100px, calc(100% - 24px)) !important;
  max-height: calc(100vh - 140px) !important;
  overflow: auto !important;

  z-index: 99991 !important;
  background: rgba(7,20,33,.98) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.45) !important;
}

/* Texto legible dentro del modal */
.vpui-module-progreso .wpProQuiz_modal_window,
.vpui-module-progreso .wpProQuiz_modal_window *,
.vpui-module-progreso .wpProQuiz_statistics,
.vpui-module-progreso .wpProQuiz_statistics *{
  color: rgba(255,255,255,.88) !important;
}

/* Tabla del modal */
.vpui-module-progreso .wpProQuiz_modal_window table,
.vpui-module-progreso .wpProQuiz_statistics table{
  width: 100% !important;
  background: transparent !important;
  border-collapse: collapse !important;
}

.vpui-module-progreso .wpProQuiz_modal_window th,
.vpui-module-progreso .wpProQuiz_modal_window td,
.vpui-module-progreso .wpProQuiz_statistics th,
.vpui-module-progreso .wpProQuiz_statistics td{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Botones dentro del modal */
.vpui-module-progreso .wpProQuiz_modal_window button,
.vpui-module-progreso .wpProQuiz_modal_window input[type="button"],
.vpui-module-progreso .wpProQuiz_modal_window input[type="submit"],
.vpui-module-progreso .wpProQuiz_statistics button,
.vpui-module-progreso .wpProQuiz_statistics input[type="button"],
.vpui-module-progreso .wpProQuiz_statistics input[type="submit"]{
  background: rgba(212,175,55,.95) !important;
  color: #0b1e30 !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
.vpui-list-left{ display:flex; flex-direction:column; gap:8px; }

.vpui-quiz-meta{ display:flex; flex-wrap:wrap; gap:8px; }

.vpui-badge{
  display:inline-flex;
  align-items:center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.85);
}

.vpui-badge--done{
  border-color: rgba(80,200,140,.35);
  background: rgba(80,200,140,.10);
  color: rgba(210,255,235,.95);
}

.vpui-badge--new{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.75);
}

.vpui-badge--score{
  border-color: rgba(212,175,55,.30);
  background: rgba(212,175,55,.10);
  color: rgba(242,211,123,.95);
}
.vpui-badge--date{
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  font-weight: 800;
}
/* ===========================
   QUIZ – Preset limpio (nav + pregunta + respuestas)
   =========================== */

:root{
  /* Ajusta solo esto si quieres más/menos “glass” */
  --vpui-quiz-glass-bg: rgba(212,175,55,.12);
  --vpui-quiz-glass-border: rgba(212,175,55,.28);
  --vpui-quiz-glass-bg-hover: rgba(212,175,55,.18);
  --vpui-quiz-glass-border-hover: rgba(212,175,55,.46);
  --vpui-quiz-glass-bg-active: rgba(212,175,55,.30);
  --vpui-quiz-glass-border-active: rgba(212,175,55,.70);

  --vpui-quiz-card-bg: rgba(255,255,255,.04);
  --vpui-quiz-card-border: rgba(255,255,255,.12);

  --vpui-quiz-radius: 14px;
  --vpui-quiz-nav-size: 44px;
}
/* GENERADOR – layout */
.vpui-generador-run .vpui-module-generador{
  max-width: 980px;
  margin: 0 auto;
}
.vpui-generador-run .vpui-module-generador h1,
.vpui-generador-run .vpui-module-generador h2{
  color: rgba(255,255,255,.95);
}
/* =========================================
   GENERADOR (modo test) – Skin como Quiz
   Usa tus clases: .vp-tg-q / .vp-tg-ans
   ========================================= */

/* contador para numeración tipo quiz */
.vpui-module-generador{
  counter-reset: vptg;
}

/* Card de pregunta */
.vpui-module-generador .vp-tg-q{
    counter-increment: vptg;
    position: relative;
    background: rgb(255 255 255 / 0%) !important;
    border: 1px solid rgb(255 255 255 / 0%) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    margin: 12px 0 !important;
}

/* Badge de número (arriba-izquierda) */
.vpui-module-generador .vp-tg-q::before
 {
    content: counter(vptg);
    position: absolute;
    top: 12px;
    left: -25px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(212 175 55 / 41%);
    border: 1px solid rgba(212, 175, 55, .28);
    color: rgba(255, 255, 255, .92);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

/* Línea del enunciado (el primer div dentro de .vp-tg-q) */
.vpui-module-generador .vp-tg-q > div:first-child{
  padding-left: 56px !important; /* hueco para el badge */
  color: rgba(255,255,255,.95) !important;
  font-weight: 900 !important;
  margin-bottom: 10px !important;
}

/* Oculta el <strong>1.</strong> original para que no duplique numeración */
.vpui-module-generador .vp-tg-q > div:first-child strong{
  display: none !important;
}

/* Respuestas: lista vertical con cards */
.vpui-module-generador .vp-tg-ans{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cada respuesta como card clicable */
.vpui-module-generador .vp-tg-ans label{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;

  padding: 14px !important;
  border-radius: 14px !important;

  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;

  color: rgba(255,255,255,.90) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Hover como en quiz */
.vpui-module-generador .vp-tg-ans label:hover{
  border-color: rgba(212,175,55,.35) !important;
  background: rgba(212,175,55,.06) !important;
}

/* Radio alineado */
.vpui-module-generador .vp-tg-ans input[type="radio"]{
  margin-top: 2px !important;
  transform: scale(1.15);
}

/* Opción marcada (clase que pondremos con JS opcional) */
.vpui-module-generador .vp-tg-ans label.is-checked{
  border-color: rgba(212,175,55,.55) !important;
  background: rgba(212,175,55,.10) !important;
}
.vpui-module-generador .vp-tg-q > div:first-child {
    display: block !important;
    padding: 12px 14px !important;
    border-radius: var(--vpui-quiz-radius) !important;
    background: #001a33 !important;
    border: 1px solid rgb(255 255 255 / 11%) !important;
    color: rgb(255 255 255) !important;
    font-weight: 500 !important;
    margin: 12px 0 10px 0 !important;
}
/* GENERADOR: quitar borde SOLO de la card que te molesta */
.vpui-module-generador .vp-tg-card{
  border: 1px solid transparent !important;
}
/* =====================================================
   GENERADOR – Barra de numeritos estilo quiz (arriba)
   ===================================================== */

.vpui-generador-run .vpui-tg-review{
  position: sticky;
  top: 72px;                 /* ajusta si tu topbar ocupa más/menos */
  z-index: 50;
  margin: 0 0 14px 0;
  padding: 10px 10px 6px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,20,33,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vpui-generador-run .vpui-tg-review__list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Botón numerito (glass) */
.vpui-generador-run .vpui-tg-review__button{
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  background: rgba(212,175,55,.12);
  border: 1px solid rgba(212,175,55,.28);

  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-variant-numeric: tabular-nums;

  box-shadow: none;
  outline: none;
  cursor: pointer;
}

.vpui-generador-run .vpui-tg-review__button:hover{
  background: rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.46);
}

/* Sin responder (gris) */
.vpui-generador-run .vpui-tg-review__button.is-unanswered{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.78);
}

/* Respondida (dorado) */
.vpui-generador-run .vpui-tg-review__button.is-answered{
  background: rgba(212,175,55,.18) !important;
  border-color: rgba(212,175,55,.40) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Pregunta actual (resalta) */
.vpui-generador-run .vpui-tg-review__button.is-current{
  background: rgba(212,175,55,.30);
  border-color: rgba(212,175,55,.70);
  color: #0b1e30;
}

/* GENERADOR – Barra numeritos (forzar visible aunque haya reglas agresivas) */
.vpui-generador-run .vpui-tg-review{
  position: sticky !important;
  top: 72px !important;
  z-index: 999 !important;

  margin: 0 0 14px 0 !important;
  padding: 10px 10px 6px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(7,20,33,.85) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vpui-generador-run .vpui-tg-review__list{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.vpui-generador-run .vpui-tg-review__button{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 12px !important;
  background: rgba(212,175,55,.12) !important;
  border: 1px solid rgba(212,175,55,.28) !important;

  color: rgba(255,255,255,.92) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums;

  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
}
.vpui-generador-run .vpui-tg-review__button.is-unanswered{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.78) !important;
}

.vpui-generador-run .vpui-tg-review__button.is-answered{
  background: rgba(212,175,55,.18) !important;
  border-color: rgba(212,175,55,.40) !important;
  color: rgba(255,255,255,.92) !important;
}
.vpui-generador-run .vpui-tg-review__button.is-current{
  background: rgba(212,175,55,.30) !important;
  border-color: rgba(212,175,55,.70) !important;
  color: #0b1e30 !important;
}
.vpui-generador-run .vpui-tg-review__button.is-blank{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.78) !important;
}

.vpui-generador-run .vpui-tg-review__button.is-correct{
  background: rgba(34,197,94,.18) !important;
  border-color: rgba(34,197,94,.42) !important;
  color: rgba(255,255,255,.92) !important;
}

.vpui-generador-run .vpui-tg-review__button.is-wrong{
  background: rgba(239,68,68,.18) !important;
  border-color: rgba(239,68,68,.42) !important;
  color: rgba(255,255,255,.92) !important;
}
/* ===== GENERADOR: temporizador dentro de la barra sticky ===== */
.vpui-generador-run .vpui-tg-review{
  /* ya lo tienes sticky; solo aseguramos que el contenido se vea bien */
  padding-top: 12px !important;
}

.vpui-generador-run .vpui-tg-review__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.vpui-generador-run .vpui-tg-review__timer{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  white-space: nowrap;
}

.vpui-generador-run .vpui-tg-review__timer .vpui-tg-review__timer-value{
  color: rgba(242,211,123,.95);
  font-weight: 900;
}

/* En móvil, que la barra no se desmadre */
@media (max-width: 520px){
  .vpui-generador-run .vpui-tg-review__top{
    flex-direction: column;
    align-items: flex-start;
  }
}
/* =====================================================
   FALLADAS – Barra numeritos + temporizador (igual que Generador)
   ===================================================== */

.vpui-falladas-run .vpui-tg-review{
  position: sticky !important;
  top: 72px !important;
  z-index: 999 !important;

  margin: 0 0 14px 0 !important;
  padding: 12px 10px 6px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(7,20,33,.85) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vpui-falladas-run .vpui-tg-review__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.vpui-falladas-run .vpui-tg-review__timer{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  white-space: nowrap;
}
.vpui-falladas-run .vpui-tg-review__timer .vpui-tg-review__timer-value{
  color: rgba(242,211,123,.95);
  font-weight: 900;
}

.vpui-falladas-run .vpui-tg-review__list{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}

.vpui-falladas-run .vpui-tg-review__button{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  padding:0 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  border-radius:12px !important;
  background: rgba(212,175,55,.12) !important;
  border: 1px solid rgba(212,175,55,.28) !important;

  color: rgba(255,255,255,.92) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;

  box-shadow:none !important;
  outline:none !important;
  cursor:pointer !important;
}

.vpui-falladas-run .vpui-tg-review__button.is-unanswered{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.78) !important;
}

.vpui-falladas-run .vpui-tg-review__button.is-answered{
  background: rgba(212,175,55,.18) !important;
  border-color: rgba(212,175,55,.40) !important;
  color: rgba(255,255,255,.92) !important;
}
.vpui-falladas-run .vpui-tg-review__button.is-current{
  background: rgba(212,175,55,.30) !important;
  border-color: rgba(212,175,55,.70) !important;
  color: #0b1e30 !important;
}
.vpui-falladas-run .vpui-tg-review__button.is-blank{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.78) !important;
}

.vpui-falladas-run .vpui-tg-review__button.is-correct{
  background: rgba(34,197,94,.18) !important;
  border-color: rgba(34,197,94,.42) !important;
  color: rgba(255,255,255,.92) !important;
}

.vpui-falladas-run .vpui-tg-review__button.is-wrong{
  background: rgba(239,68,68,.18) !important;
  border-color: rgba(239,68,68,.42) !important;
  color: rgba(255,255,255,.92) !important;
}
/* =====================================================
   FALLADAS – Cards + numeración + respuestas (igual que Quiz/Generador)
   ===================================================== */

.vpui-falladas-run .vpui-module-falladas{
  counter-reset: vpfd;
}

.vpui-falladas-run .vpui-module-falladas .vpui-qcard{
  counter-increment: vpfd;
  position: relative;

  background: rgba(255,255,255,) !important;
  border: 1px solid rgba(255,255,255,) !important;
  border-radius: 16px !important;

  padding: 14px !important;
  margin: 12px 0 !important;
}

.vpui-falladas-run .vpui-module-falladas .vpui-qcard::before{
    content: counter(vpfd);
    position: absolute;
    top: 12px;
    left: -25px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(212 175 55 / 41%);
    border: 1px solid rgba(212, 175, 55, .28);
    color: rgba(255, 255, 255, .92);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

/* Enunciado: el JS añadirá .vpui-qtitle al bloque de texto */
.vpui-falladas-run .vpui-module-falladas .vpui-qtitle{
  padding-left: 56px !important;
  color: rgba(255,255,255,.95) !important;
  font-weight: 900 !important;
  margin: 0 0 10px 0 !important;
}

/* Respuestas (labels) como card */
.vpui-falladas-run .vpui-module-falladas .vpui-acard{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;

  padding: 14px !important;
  border-radius: 14px !important;

  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;

  color: rgba(255,255,255,.90) !important;
  cursor: pointer !important;

  margin: 10px 0 !important;
}

.vpui-falladas-run .vpui-module-falladas .vpui-acard:hover{
  border-color: rgba(212,175,55,.35) !important;
  background: rgba(212,175,55,.06) !important;
}

.vpui-falladas-run .vpui-module-falladas input[type="radio"],
.vpui-falladas-run .vpui-module-falladas input[type="checkbox"]{
  margin-top: 2px !important;
  transform: scale(1.15);
}

/* FALLADAS: quitar borde SOLO de la card que te molesta */
.vpui-module-falladas .vp-tg-card{
  border: 1px solid transparent !important;
}
.vpui-module-falladas .vp-tg-q > div:first-child {
    display: block !important;
    padding: 12px 14px !important;
    border-radius: var(--vpui-quiz-radius) !important;
    background: #001a33 !important;
    border: 1px solid rgb(255 255 255 / 11%) !important;
    color: rgb(255 255 255) !important;
    font-weight: 500 !important;
    margin: 12px 0 10px 0 !important;
}
.vpui-module-falladas .vp-tg-q
 {
    padding: 14px;
    border: 1px solid transparent !important;
    border-radius: 12px;
    margin: 12px 0;
}
/* =========================================================
   VP - Estilo unificado de opciones (Generador + Falladas)
   Requiere que el HTML de resultados use:
     .vpui-opt (una por respuesta)
     .is-selected / .is-correct / .is-wrong
   ========================================================= */

.vpui-module-generador .vpui-opt,
.vpui-module-falladas  .vpui-opt{
  display:block;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin: 12px 0;
}

/* EXAMEN: seleccionada = dorado */
body.vpui-has-session:not(.vpui-view-results) .vpui-module-generador .vpui-opt.is-selected,
body.vpui-has-session:not(.vpui-view-results) .vpui-module-falladas  .vpui-opt.is-selected{
  background: rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.45);
}

/* CORRECCIÓN: correcta siempre verde + negrita */
body.vpui-view-results .vpui-module-generador .vpui-opt.is-correct,
body.vpui-view-results .vpui-module-falladas  .vpui-opt.is-correct{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.35);
  font-weight: 800;
}

/* CORRECCIÓN: solo la seleccionada incorrecta en rojo */
body.vpui-view-results .vpui-module-generador .vpui-opt.is-wrong,
body.vpui-view-results .vpui-module-falladas  .vpui-opt.is-wrong{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.35);
}

/* Bloque explicación */
.vpui-module-generador .vpui-expl,
.vpui-module-falladas  .vpui-expl{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.vpui-module-generador .vpui-expl-label,
.vpui-module-falladas  .vpui-expl-label{
  font-weight: 900;
  letter-spacing: .4px;
  margin-bottom: 8px;
  opacity: .92;
}
/* Cards base para generador/falladas */
.vpui-module-generador .vpui-opt,
.vpui-module-falladas  .vpui-opt{
  display:block;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin:12px 0;
}

/* Examen: seleccionada dorado */
body.vpui-has-session:not(.vpui-view-results) .vpui-module-generador .vpui-opt.is-selected,
body.vpui-has-session:not(.vpui-view-results) .vpui-module-falladas  .vpui-opt.is-selected{
  background: rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.45);
}

/* Corrección */
body.vpui-view-results .vpui-module-generador .vpui-opt.is-correct,
body.vpui-view-results .vpui-module-falladas  .vpui-opt.is-correct{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.35);
  font-weight:800;
}

body.vpui-view-results .vpui-module-generador .vpui-opt.is-wrong,
body.vpui-view-results .vpui-module-falladas  .vpui-opt.is-wrong{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.35);
}

/* Explicación */
.vpui-module-generador .vpui-expl,
.vpui-module-falladas  .vpui-expl{
  margin-top:14px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.vpui-module-generador .vpui-expl-label,
.vpui-module-falladas  .vpui-expl-label{
  font-weight:900;
  letter-spacing:.4px;
  margin-bottom:8px;
  opacity:.92;
}
.vpui-module-generador .vpui-opt,
.vpui-module-falladas  .vpui-opt{
  display:block;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin:12px 0;
}

body.vpui_view-results .vpui-module-generador .vpui-opt.is-correct,
body.vpui_view-results .vpui-module-falladas  .vpui-opt.is-correct,
body.vpui-view-results .vpui-module-generador .vpui-opt.is-correct,
body.vpui-view-results .vpui-module-falladas  .vpui-opt.is-correct{
  background: rgba(34,197,94,.14) !important;
  border-color: rgba(34,197,94,.35) !important;
  font-weight: 800 !important;
}

body.vpui-view-results .vpui-module-generador .vpui-opt.is-wrong,
body.vpui-view-results .vpui-module-falladas  .vpui-opt.is-wrong{
  background: rgba(239,68,68,.14) !important;
  border-color: rgba(239,68,68,.35) !important;
}
/* ================================
   Generador/Falladas: en resultados NO mostrar tiempo
   (mantener numeritos)
   ================================ */

body.vpui-view-results .vpui-module-generador .vpui-tg-review__top,
body.vpui-view-results .vpui-module-generador .vpui-tg-review__timer,
body.vpui-view-results .vpui-module-falladas  .vpui-tg-review__top,
body.vpui-view-results .vpui-module-falladas  .vpui-tg-review__timer {
  display: none !important;
}

/* Asegura que la fila de numeritos sigue visible */
body.vpui-view-results .vpui-module-generador .vpui-tg-review__list,
body.vpui-view-results .vpui-module-falladas  .vpui-tg-review__list {
  display: flex !important;
}
.vpui-results-note{
  margin-top: 10px;
  font-size: 12px;
  opacity: .85;
}
.vpui-results-note em{
  font-style: italic;
}
body.vpui-page-stats .vpui-hero {
  display: none !important;
}

   /* Movil generador falladas */
   
@media (max-width: 820px){

  .vpui-generador-run .vpui-tg-review,
  .vpui-falladas-run .vpui-tg-review{
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    margin: 0 0 16px 0 !important;
  }

  .vpui-generador-run .vpui-tg-review__list,
  .vpui-falladas-run .vpui-tg-review__list{
    gap: 8px !important;
  }

  .vpui-generador-run .vpui-tg-review__button,
  .vpui-falladas-run .vpui-tg-review__button{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  .vpui-generador-run .vpui-tg-review__top,
  .vpui-falladas-run .vpui-tg-review__top{
    margin-bottom: 8px !important;
  }

  .vpui-generador-run .vpui-tg-review__timer,
  .vpui-falladas-run .vpui-tg-review__timer{
    font-size: 15px !important;
    padding: 8px 10px !important;
  }
}
/* =====================================================
   MÓVIL: quitar fondo blanco lateral / inferior
   ===================================================== */
html,
body{
  background: #071421 !important;
  overflow-x: clip !important;   /* clip, no hidden: hidden rompe position:sticky */
  max-width: 100% !important;
}

body{
  min-height: 100vh !important;
}

.vpui-page-generador,
.vpui-page-falladas,
.vpui-generador-run,
.vpui-falladas-run,
.vpui-module-generador,
.vpui-module-falladas{
  background: #071421 !important;
  overflow-x: clip !important;   /* clip, no hidden: hidden rompe position:sticky */
  max-width: 100% !important;
}
/* =====================================================
   MÓVIL: Generador - arreglar columna "Nº preguntas"
   ===================================================== */
@media (max-width: 820px){

  .vpui-module-generador table{
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  .vpui-module-generador th,
  .vpui-module-generador td{
    padding: 12px 8px !important;
    vertical-align: middle !important;
    overflow: visible !important;
  }

  /* Columna 1: Tema */
  .vpui-module-generador th:nth-child(1),
  .vpui-module-generador td:nth-child(1){
    width: 52% !important;
    text-align: left !important;
    word-break: break-word !important;
  }

  /* Columna 2: Incluir */
  .vpui-module-generador th:nth-child(2),
  .vpui-module-generador td:nth-child(2){
    width: 20% !important;
    text-align: center !important;
  }

  /* Columna 3: Nº preguntas */
  .vpui-module-generador th:nth-child(3),
  .vpui-module-generador td:nth-child(3){
    width: 28% !important;
    text-align: center !important;
  }

  .vpui-module-generador th:nth-child(3){
    font-size: 14px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }

  .vpui-module-generador input[type="number"]{
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .vpui-module-generador select{
    max-width: 100% !important;
  }
}

/* ===== Menú móvil de modos ===== */
.vpui-mobile-fab,
.vpui-mobile-overlay,
.vpui-mobile-drawer{
  display:none;
}

@media (max-width: 991px){
  .vpui-mobile-fab{
    position:fixed;
    right:16px;
    bottom:16px;
    z-index:90;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 14px;
    border-radius:999px;
    border:1px solid rgba(212,175,55,.35);
    background:rgba(7,20,33,.96);
    color:rgba(255,255,255,.92);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    font-weight:900;
    cursor:pointer;
  }

  /* Preproducción: mientras se hace un test (runner con su pie EN PANTALLA:
     tests-pro, simulacro y quiz de LearnDash con el vestidor; o el runner
     psico) el fab no se pinta: tapaba «Entregar», el panel de bloques y
     «Empezar ejercicio N». Se sale con los botones del propio runner.
     :not([hidden]) porque el vestidor de ProQuiz oculta el pie con el
     atributo hidden en corrección y resultados: ahí el fab vuelve. */
  body:has(.vpr-foot:not([hidden])) .vpui-mobile-fab,
  body:has(#vp-psi-app[data-vista="runner"]) .vpui-mobile-fab{
    display:none;
  }

  /* Y en el resto: hueco al final para que lo último no quede debajo… */
  .vpui-main{
    padding-bottom:96px;
  }

  /* …y se esconde al bajar la página y vuelve al subirla (vp-campus-ui.js). */
  .vpui-mobile-fab{
    transition:transform .2s ease, opacity .2s ease;
  }
  .vpui-mobile-fab.is-escondido{
    transform:translateY(150%);
    opacity:0;
    pointer-events:none;
  }

  .vpui-mobile-fab__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:999px;
    background:rgba(212,175,55,.16);
    color:var(--vpui-gold2);
    font-size:13px;
    line-height:1;
  }

  .vpui-mobile-fab__text{
    font-size:13px;
    line-height:1;
  }

  .vpui-mobile-overlay{
    position:fixed;
    inset:0;
    z-index:88;
    display:block;
    background:rgba(0,0,0,.44);
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease, visibility .18s ease;
  }

  .vpui-mobile-drawer{
    position:fixed;
    top:0;
    left:0;
    z-index:89;
    display:flex;
    flex-direction:column;
    width:min(320px, 84vw);
    height:100vh;
    background:rgba(7,20,33,.98);
    border-right:1px solid rgba(255,255,255,.10);
    box-shadow:0 24px 54px rgba(0,0,0,.45);
    transform:translateX(-100%);
    transition:transform .22s ease;
    padding:18px 14px 22px;
  }

  .vpui-mobile-drawer.is-open{
    transform:translateX(0);
  }

  .vpui-mobile-overlay.is-open{
    opacity:1;
    visibility:visible;
  }

  body.vpui-mobile-menu-open{
    overflow:hidden;
  }

  .vpui-mobile-drawer__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-bottom:14px;
    margin-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .vpui-mobile-drawer__title{
    color:#fff;
    font-weight:900;
    font-size:16px;
  }

  .vpui-mobile-close{
    appearance:none;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    color:#fff;
    width:38px;
    height:38px;
    border-radius:12px;
    cursor:pointer;
    font-size:22px;
    line-height:1;
  }

  .vpui-mobile-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-top:6px;
  }

  .vpui-mobile-nav .vpui-nav-link{
    display:block;
    padding:12px 14px;
    border-radius:12px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    color:rgba(255,255,255,.86);
  }

  .vpui-mobile-nav .vpui-nav-link.is-active{
    color:#0b1e30;
    background:rgba(212,175,55,.96);
    border-color:rgba(212,175,55,.96);
  }
}
/* =========================================
   PÁGINAS LEGALES / PRIVACIDAD / COOKIES / CONDICIONES
   ========================================= */

.vpui-module-legal,
.vpui-module-privacidad,
.vpui-module-cookies,
.vpui-module-condiciones{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.vpui-legal-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,.18);
  background:
    radial-gradient(600px 180px at 0% 0%, rgba(212,175,55,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  position: relative;
  overflow: hidden;
}

.vpui-legal-top::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.08) 35%, transparent 62%);
  transform: translateX(-120%);
  animation: vpuiLegalShine 7s linear infinite;
  pointer-events: none;
}

@keyframes vpuiLegalShine{
  to{ transform: translateX(120%); }
}

.vpui-legal-top__text{
  position: relative;
  z-index: 1;
}

.vpui-legal-top__eyebrow{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.30);
  background: rgba(212,175,55,.08);
  color: rgba(242,211,123,.95);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
}

.vpui-legal-top__title{
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 6px;
  color: rgba(255,255,255,.96);
}

.vpui-legal-top__desc{
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  max-width: 760px;
}

.vpui-legal-wrap{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vpui-legal-card{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  padding: 22px;
}

.vpui-legal-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(500px 140px at 100% 0%, rgba(212,175,55,.08), transparent 50%);
  pointer-events: none;
}

.vpui-legal-card h2{
  margin: 0 0 14px;
  color: rgba(255,255,255,.96);
  font-size: 20px;
  line-height: 1.2;
}

.vpui-legal-card h3{
  margin: 18px 0 10px;
  color: rgba(242,211,123,.95);
  font-size: 15px;
  line-height: 1.35;
}

.vpui-legal-card p,
.vpui-legal-card li{
  color: rgba(255,255,255,.78);
  line-height: 1.72;
  font-size: 15px;
}

.vpui-legal-card ul{
  margin: 10px 0 0 18px;
  padding: 0;
}

.vpui-legal-card strong{
  color: rgba(255,255,255,.94);
}

.vpui-legal-data{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

@media (min-width: 768px){
  .vpui-legal-data{
    grid-template-columns: repeat(2, 1fr);
  }
}

.vpui-legal-data__item{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 14px;
}

.vpui-legal-data__label{
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: rgba(242,211,123,.90);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.vpui-legal-data__value{
  color: rgba(255,255,255,.88);
  line-height: 1.55;
  word-break: break-word;
}

@media (max-width: 767px){
  .vpui-legal-top{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* CSS DE OLVIDAR CONTRASEÑA*/ 

.vpui-login-lost-wrap{
  margin: 14px 0 0;
}

.vpui-login-lost{
  color: rgba(242,211,123,.95);
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
}

.vpui-login-lost:hover{
  color: rgba(242,211,123,1);
  text-decoration: underline;
}

/* ===== Bandeja.F — Punto rojo de notificaciones en items del nav ===== */

/* Desktop topbar y mobile drawer comparten .vpui-nav-link.has-notification */
.vpui-nav-link.has-notification{
  position: relative;
}

.vpui-nav-link__dot{
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(7,20,33,.96), 0 0 6px rgba(239,68,68,.55);
  pointer-events: none;
}

/* Cuando el item está activo (fondo dorado), el dot sigue siendo rojo
   pero se separa con un borde claro en lugar del navy oscuro. */
.vpui-nav-link.is-active .vpui-nav-link__dot{
  box-shadow: 0 0 0 2px rgba(212,175,55,.96), 0 0 6px rgba(239,68,68,.55);
}

/* En el drawer móvil los items son bloques anchos: el dot va alineado
   al label, separado por un pequeño gap a la derecha del texto. */
@media (max-width: 991px){
  .vpui-mobile-nav .vpui-nav-link.has-notification{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .vpui-mobile-nav .vpui-nav-link__dot{
    position: static;
    flex: 0 0 auto;
  }

  /* Punto rojo del FAB cuando hay notificaciones */
  .vpui-mobile-fab{ position: fixed; }
  .vpui-mobile-fab__dot{
    position: absolute;
    top: 6px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(7,20,33,.96), 0 0 8px rgba(239,68,68,.65);
    pointer-events: none;
  }
}
/* =========================================================
   DASHBOARD /tests-pn/: card de Novedades como QUINTA PIEZA
   de la fila de cifras (.vpui-stats).

   Contexto (acoplamiento consciente con vp-novedades, como el
   de .vpui-scoreline-es con el injector de nota): la card llega
   por vpui_tests_pn_cards y el JS de vp-novedades la re-parenta
   a un <div class="vp-novedades-strip"> insertado como hermano
   JUSTO ANTES de .vpui-stats, alineada a la derecha (flotaba
   desalineada sobre la fila de cifras). Aquí, SOLO cuando ese
   strip existe (:has), el .vpui-container pasa a grid de 2
   columnas: la fila de cifras a la izquierda y el strip como
   quinta pieza, misma fila y misma altura (stretch del grid).
   Col. 2 = ((100% - 4*12px) / 5) => las 5 piezas quedan con el
   MISMO ancho (las 4 stats reparten el resto con sus 3 gaps).
   En móvil (< 992px) el strip pasa a ancho completo DEBAJO de
   las cifras. Sin strip (sin novedades publicadas, o JS aún no
   ejecutado), nada de esto aplica y el contenedor sigue igual.
   Clases externas estiladas: .vp-novedades-strip,
   .vp-novedades-card (documentado en docs/ARQUITECTURA.md).
   ========================================================= */

.vpui-container:has(> .vp-novedades-strip){
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 12px;               /* = gap de .vpui-stats */
}
.vpui-container:has(> .vp-novedades-strip) > *{
  grid-column: 1 / -1;
  min-width: 0;
}
.vpui-container:has(> .vp-novedades-strip) > .vpui-stats{
  grid-column: 1;
  grid-row: 2;                    /* fila 1 = hero (autocolocado) */
}
/* Móvil: ancho completo debajo de las cifras */
.vpui-container:has(> .vp-novedades-strip) > .vp-novedades-strip{
  grid-column: 1;
  grid-row: 3;
  display: flex;                  /* anula el justify-content:flex-end… */
  margin: 12px 0 0;               /* …y el margin-bottom del strip */
}
/* Escritorio: quinta pieza de la fila de cifras */
@media (min-width: 992px){
  .vpui-container:has(> .vp-novedades-strip){
    grid-template-columns: minmax(0, 1fr) calc((100% - 48px) / 5);
  }
  .vpui-container:has(> .vp-novedades-strip) > .vp-novedades-strip{
    grid-column: 2;
    grid-row: 2;
    margin: 16px 0 0;             /* = margin-top de .vpui-stats */
  }
}
/* La card llena el strip y estira a la altura de la fila (misma
   altura que .vpui-stat vía stretch). Border 1px y radio 14px ya
   coinciden con .vpui-stat (los pone el CSS de vp-novedades; el
   tinte dorado y el pulso de "sin leer" se conservan adrede). */
.vpui-container:has(> .vp-novedades-strip) > .vp-novedades-strip .vp-novedades-card.vpui-card{
  width: 100%;
  min-height: 0;
  padding: 12px 14px;
}
/* La desc entera en dos líneas: anula el ellipsis de una línea que trae
   el CSS de vp-novedades (overflow hidden + nowrap). */
.vpui-container:has(> .vp-novedades-strip) > .vp-novedades-strip .vp-novedades-card .vpui-card-desc{
  white-space: normal;
  overflow: visible;
  font-size: 12px;
  line-height: 1.25;
}