:root{
      --sena:#39A900;
      --ink:#0f172a;
      --muted:#64748b;
      --bg:#f6f8fb;
      --card:#ffffff;
      --border:rgba(15, 23, 42, .08);
      --shadow: 0 18px 60px rgba(15,23,42,.08);
    }
    body{ background: var(--bg); }
    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:28px;
      box-shadow: var(--shadow);
    }
    .soft{
      border:1px solid rgba(15, 23, 42, .06);
      background: rgba(255,255,255,.7);
      box-shadow: 0 10px 30px rgba(15,23,42,.05);
      backdrop-filter: blur(8px);
    }
    .btn-sena{
      background: var(--sena);
      color: white;
    }
    .btn-sena:hover{ filter: brightness(.95); }
    .btn-ghost{
      background:#fff;
      border:1px solid rgba(15, 23, 42, .10);
    }
    .btn-ghost:hover{ background:#f8fafc; }

    .dz{
      border:2px dashed rgba(15,23,42,.12);
      background: #f8fafc;
      border-radius: 24px;
      transition: .15s ease;
    }
    .dz:hover{
      background:#f1f5f9;
      border-color: rgba(57,169,0,.45);
    }
    .ring-sena{
      outline: none;
      box-shadow: 0 0 0 4px rgba(57,169,0,.18);
      border-color: rgba(57,169,0,.65) !important;
    }
    .kbd{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      background:#0b1220;
      color:#e5e7eb;
      border-radius:10px;
      padding:2px 8px;
      font-weight:800;
      font-size:12px;
    }
  
    /* Anti-copia (best-effort) */
    .no-select, .no-select * { -webkit-user-select: none; user-select: none; }
    input, textarea { -webkit-user-select: text; user-select: text; }

    /* Animaciones sutiles */
    @keyframes qs-bounce {
      0%, 100% { transform: translateY(0); }
      30% { transform: translateY(-6px); }
      60% { transform: translateY(0); }
      80% { transform: translateY(-2px); }
    }
    .qs-bounce { animation: qs-bounce 600ms ease; }
    .qs-soft { transition: color .25s ease, transform .25s ease, background-color .25s ease, border-color .25s ease; }

    /* Dropzone: compacto */
    .dz { border: 2px dashed rgba(148,163,184,.45); border-radius: 24px; background: rgba(248,250,252,.85); }
    @media (min-width: 1024px){
      .dz { padding: 18px !important; }
    }

  

/* --- Modos (Evaluación / Práctica / Millonario) --- */
.mode-seg { display: inline-flex; gap: 6px; padding: 6px; background: #f1f5f9; border: 1px solid rgba(15,23,42,.08); border-radius: 999px; box-shadow: 0 10px 30px rgba(15,23,42,.05); }
.mode-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(15,23,42,.10); background: #fff; font-weight: 900; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: #64748b; transition: .18s ease; }
.mode-btn:hover{ background:#f8fafc; }
.mode-btn[aria-pressed="true"]{ border-color: rgba(15,23,42,.18); color:#0f172a; }
.mode-btn[data-mode="evaluation"][aria-pressed="true"]{ background: #dcfce7; color:#166534; border-color: rgba(22,101,52,.25); }
.mode-btn[data-mode="practice"][aria-pressed="true"]{ background: #ede9fe; color:#6d28d9; border-color: rgba(109,40,217,.25); }
.mode-btn[data-mode="millionaire"][aria-pressed="true"]{ background: #fff7ed; color:#9a3412; border-color: rgba(154,52,18,.25); }
.mode-btn[data-mode="parques"][aria-pressed="true"]{ background: #e0f2fe; color:#075985; border-color: rgba(7,89,133,.25); }

/* Animaciones de Práctica */
@keyframes pop-in { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes float-up { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
.xp-float { position: absolute; font-weight: 900; color: #fbbf24; animation: float-up 1s ease-out forwards; pointer-events: none; }


    /* Ajuste V54: pregunta larga más legible y sin recorte */
    .qHero{ gap:12px; }
    .qHeroTexts strong{
      font-size:clamp(26px,3.2vw,48px) !important;
      line-height:1.08 !important;
      letter-spacing:-.035em !important;
      max-height:3.35em !important;
      -webkit-line-clamp:3 !important;
      overflow:hidden !important;
    }
    .qHeroTexts small{ font-size:clamp(13px,1.3vw,18px) !important; line-height:1.1 !important; }
    .qHeroBadge{ width:72px !important; height:72px !important; border-radius:20px !important; font-size:34px !important; }
    .qTimeBox{ min-width:210px !important; padding:10px 16px !important; border-radius:24px !important; }
    .qTimeIcon{ font-size:40px !important; }
    .qTimeMeta span{ font-size:16px !important; }
    .qTimeMeta strong{ font-size:46px !important; }
    .qTimeMeta strong em{ font-size:24px !important; }
    .questionPanel{ gap:8px !important; padding:18px 28px !important; }
    .timerBar{ height:12px !important; margin:4px 0 8px !important; }
    .qProgressCard{ padding:14px 18px !important; margin-bottom:8px !important; }
    .qProgressTitle{ font-size:14px !important; margin-bottom:8px !important; }
    .qProgressBar{ height:34px !important; }
    .questionDiceStrip{ margin:4px 0 8px !important; }
    .qDieMini,.qSumMini{ height:56px !important; min-width:76px !important; border-radius:18px !important; }
    .qDieMini{ font-size:34px !important; }
    .qSumMini strong{ font-size:26px !important; }
    .overlayLifelines{ gap:10px !important; margin:8px 0 8px !important; }
    .overlayLife{ min-height:86px !important; padding:10px 12px !important; border-radius:16px !important; }
    .overlayLife .lifeCard{ flex-direction:row !important; align-items:center !important; text-align:left !important; gap:10px !important; }
    .overlayLife .lifeIcon{ width:50px !important; height:50px !important; font-size:24px !important; border-radius:14px !important; flex:0 0 50px !important; }
    .overlayLife .lifeBody{ align-items:flex-start !important; gap:1px !important; }
    .overlayLife .lifeName{ font-size:16px !important; line-height:1.05 !important; }
    .overlayLife .lifeDesc{ display:none !important; }
    .overlayLife .lifeState{ order:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; font-size:12px !important; }
    .overlayHint{ display:none !important; }
    .questionPanel .options{ gap:12px !important; }
    .questionPanel .opt{ padding:18px 22px !important; border-radius:18px !important; }
    .questionPanel .optLetter{ width:72px !important; height:72px !important; font-size:44px !important; border-radius:16px !important; margin-right:18px !important; }
    .questionPanel .optText{ font-size:clamp(24px,2.4vw,42px) !important; line-height:1.08 !important; -webkit-line-clamp:unset !important; overflow-wrap:anywhere !important; }
    @media (max-width:900px){
      .qHeroTexts strong{ font-size:clamp(22px,5.4vw,34px) !important; -webkit-line-clamp:3 !important; }
      .qHero{ grid-template-columns:1fr !important; }
      .qTimeBox{ justify-self:stretch !important; width:100% !important; }
    }

  
    /* V78: dos ayudas nuevas durante pregunta */
    .overlayLifelines{ grid-template-columns:repeat(9,minmax(0,1fr)) !important; gap:8px !important; }
    .overlayLife .lifeCard{ min-height:76px; }
    .overlayLife .lifeIcon{ width:46px !important; height:46px !important; font-size:22px !important; border-radius:14px !important; flex:0 0 46px !important; }
    .overlayLife .lifeName{ font-size:clamp(12px,1.15vw,18px) !important; line-height:1.05 !important; }
    .overlayLife .lifeDesc{ display:none !important; }
    .questionOverlay.debateMode .questionPanel{ box-shadow:0 0 0 6px rgba(124,58,237,.16), 0 28px 90px rgba(15,23,42,.28); }
    @media (max-width:1200px){ .overlayLifelines{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
    @media (max-width:760px){ .overlayLifelines{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }


    #lifeAddTime .lifeIcon{ background:linear-gradient(180deg,#38bdf8,#2563eb) !important; }
    #lifeDebate .lifeIcon{ background:linear-gradient(180deg,#a78bfa,#6d28d9) !important; }
    #lifeWrongPlayer .lifeIcon{ background:linear-gradient(180deg,#fb7185,#be123c) !important; }
    .overlayLifelines.hasWrongPlayerHelp{ grid-template-columns:repeat(9,minmax(0,1fr)) !important; }
    .overlayLifelines:not(.hasWrongPlayerHelp){ grid-template-columns:repeat(6,minmax(0,1fr)) !important; }




    /* V79: ayudas de pregunta en una sola fila, iconos visibles y contador central de debate */
    .questionPanel{ width:100vw !important; max-width:100vw !important; height:100vh !important; max-height:100vh !important; border-radius:0 !important; padding:14px 20px !important; overflow:hidden !important; }
    .overlayLifelines{ display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; gap:8px !important; width:100% !important; margin:6px 0 8px !important; flex:0 0 auto !important; }
    .overlayLife{ min-width:0 !important; min-height:70px !important; padding:8px 10px !important; border-radius:14px !important; overflow:hidden !important; }
    .overlayLife .lifeCard{ display:grid !important; grid-template-columns:42px minmax(0,1fr) !important; min-height:52px !important; gap:8px !important; align-items:center !important; text-align:left !important; }
    .overlayLife .lifeIcon{ width:42px !important; height:42px !important; flex:0 0 42px !important; border-radius:13px !important; font-size:21px !important; color:#fff !important; display:grid !important; place-items:center !important; box-shadow:0 10px 20px rgba(15,23,42,.12), inset 0 0 0 3px rgba(255,255,255,.22) !important; }
    .overlayLife .lifeName{ font-size:clamp(11px,.9vw,15px) !important; line-height:1.02 !important; white-space:normal !important; overflow:hidden !important; text-overflow:ellipsis !important; }
    .overlayLife .lifeDesc{ display:none !important; }
    .overlayLife .lifeState{ font-size:11px !important; line-height:1 !important; margin-top:3px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
    .overlayLifelines #life5050 .lifeIcon{ background:linear-gradient(180deg,#60a5fa,#2563eb) !important; }
    .overlayLifelines #lifeRemoveOne .lifeIcon{ background:linear-gradient(180deg,#34d399,#059669) !important; }
    .overlayLifelines #lifeShared .lifeIcon{ background:linear-gradient(180deg,#f472b6,#be185d) !important; }
    .overlayLifelines #lifeSecond .lifeIcon{ background:linear-gradient(180deg,#c084fc,#9333ea) !important; }
    .overlayLifelines #lifeChange .lifeIcon{ background:linear-gradient(180deg,#fbbf24,#f97316) !important; }
    .overlayLifelines #lifeCede .lifeIcon{ background:linear-gradient(180deg,#5eead4,#0f766e) !important; }
    .overlayLifelines #lifeAddTime .lifeIcon{ background:linear-gradient(180deg,#38bdf8,#2563eb) !important; }
    .overlayLifelines #lifeDebate .lifeIcon{ background:linear-gradient(180deg,#a78bfa,#6d28d9) !important; }
    .questionDiceStrip{ display:grid !important; grid-template-columns:72px 72px minmax(88px,110px) !important; gap:8px !important; align-items:center !important; justify-content:start !important; width:max-content !important; max-width:100% !important; margin:4px 0 8px !important; }
    .qDieMini,.qSumMini{ height:52px !important; min-width:0 !important; border-radius:14px !important; overflow:hidden !important; }
    .qDieMini{ font-size:30px !important; }
    .qSumMini{ padding:4px 8px !important; display:grid !important; place-items:center !important; }
    .qSumMini span{ font-size:9px !important; line-height:1 !important; }
    .qSumMini strong{ font-size:clamp(22px,2vw,34px) !important; line-height:.95 !important; max-width:100% !important; overflow:hidden !important; }
    .debateOverlay{ display:none; position:absolute; inset:0; z-index:40; align-items:center; justify-content:center; pointer-events:auto; background:rgba(255,255,255,.72); backdrop-filter:blur(3px); }
    .questionOverlay.debateMode .debateOverlay{ display:flex; }
    .debateBox{ min-width:min(720px,92vw); border:6px solid #7c3aed; border-radius:34px; background:#fff; box-shadow:0 26px 90px rgba(15,23,42,.28); padding:34px 42px; text-align:center; }
    .debateTitle{ color:#140c69; font-weight:1000; font-size:clamp(30px,4vw,62px); line-height:1; letter-spacing:-.04em; }
    .debateCount{ margin-top:14px; color:#7c3aed; font-weight:1000; font-size:clamp(72px,12vw,180px); line-height:.9; }
    .debateMsg{ margin-top:14px; color:#0f172a; font-weight:900; font-size:clamp(18px,2vw,32px); }
    @media (max-width:900px){ .overlayLifelines{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } .questionPanel{ overflow:auto !important; } }


    /* V96: mostrar todos los equipos configurados (3 a 8) en el marcador superior */
    .topTeams{ grid-template-columns:repeat(var(--teamCols,4), minmax(118px,1fr)) !important; overflow:visible !important; }
    .topTeam{ grid-template-columns:44px minmax(0,1fr) auto !important; padding:8px 10px !important; gap:8px !important; min-width:0 !important; }
    .topTeamIcon{ width:40px !important; height:40px !important; border-radius:14px !important; font-size:20px !important; }
    .topTeamName{ font-size:clamp(10px, .82vw, 15px) !important; }
    .topTeamScore{ font-size:clamp(20px, 1.8vw, 28px) !important; }
    .topTeamLabel{ font-size:9px !important; margin-top:3px !important; }
    .topTeams[data-teams="7"], .topTeams[data-teams="8"]{ gap:5px !important; padding-left:8px !important; padding-right:8px !important; }
    .topTeams[data-teams="7"] .topTeam, .topTeams[data-teams="8"] .topTeam{ grid-template-columns:34px minmax(0,1fr) auto !important; padding:7px 8px !important; gap:6px !important; }
    .topTeams[data-teams="7"] .topTeamIcon, .topTeams[data-teams="8"] .topTeamIcon{ width:32px !important; height:32px !important; border-radius:12px !important; font-size:16px !important; }
    .topTeams[data-teams="7"] .topTeamName, .topTeams[data-teams="8"] .topTeamName{ font-size:10px !important; }
    .topTeams[data-teams="7"] .topTeamScore, .topTeams[data-teams="8"] .topTeamScore{ font-size:20px !important; }
    .topTeams[data-teams="7"] .topTeamLabel, .topTeams[data-teams="8"] .topTeamLabel{ font-size:7px !important; letter-spacing:.05em !important; }
    @media (max-width:1400px){ .topTeams{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; } }



/* =========================================================
   REDISEÑO VISUAL INICIAL · SOLO ESTILOS
   No modifica IDs, eventos, funciones ni lógica del generador.
   ========================================================= */
:root{
  --sena:#39A900;
  --sena-dark:#008a20;
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --orange:#f97316;
  --purple:#7c3aed;
  --danger:#ef4444;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#f8fafc;
  --card:#ffffff;
  --border:#e5e7eb;
  --soft-border:#dbe3ec;
  --shadow:0 8px 30px rgba(15,23,42,.06);
  --shadow-strong:0 18px 50px rgba(15,23,42,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(57,169,0,.06), transparent 28%),
    linear-gradient(180deg,#fbfdff 0%,#f7fafc 45%,#ffffff 100%) !important;
  color:#101828;
  font-family:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
}
main.mx-auto{
  width:100% !important;
  max-width:none !important;
  padding:0 22px 28px !important;
}
/* Barra superior tipo panel institucional */
main.mx-auto > section.text-center:first-child{
  margin-left:-22px;
  margin-right:-22px;
  height:86px;
  padding:0 42px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:22px;
  text-align:left !important;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #dfe6ee;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(14px);
}
main.mx-auto > section.text-center:first-child img{
  width:72px !important;
  height:72px !important;
  margin:0 !important;
  object-fit:contain;
}
main.mx-auto > section.text-center:first-child h1{
  margin:0 !important;
  font-size:38px !important;
  line-height:1 !important;
  letter-spacing:-.055em !important;
  font-weight:1000 !important;
  color:#101828 !important;
}
main.mx-auto > section.text-center:first-child h1 span{
  color:var(--sena) !important;
  font-style:normal !important;
}
main.mx-auto > section.text-center:first-child p{
  margin:6px 0 0 !important;
  font-size:13px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#667085 !important;
  font-weight:700 !important;
}
/* Instrucciones compactas */
main.mx-auto > section.card:nth-of-type(2){
  margin-top:22px !important;
  padding:0 !important;
  border-radius:14px !important;
  border:1px solid rgba(57,169,0,.20) !important;
  box-shadow:none !important;
  background:linear-gradient(180deg,rgba(248,255,250,.98),rgba(255,255,255,.98)) !important;
  overflow:hidden;
}
main.mx-auto > section.card:nth-of-type(2) .grid{
  display:block !important;
}
main.mx-auto > section.card:nth-of-type(2) .lg\:col-span-2{
  padding:24px 28px !important;
}
main.mx-auto > section.card:nth-of-type(2) .flex.items-center.gap-3 h2{
  font-size:16px !important;
  letter-spacing:-.02em !important;
  text-transform:none !important;
}
main.mx-auto > section.card:nth-of-type(2) ol{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:14px !important;
  padding:0 !important;
}
main.mx-auto > section.card:nth-of-type(2) ol li{
  list-style:none !important;
  font-size:13px !important;
  font-weight:800 !important;
  display:flex;
  align-items:center;
  gap:10px;
}
main.mx-auto > section.card:nth-of-type(2) ol li span:first-child{
  display:inline-flex;
  width:22px;
  height:22px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  margin:0 !important;
  color:#fff !important;
  background:var(--sena) !important;
  font-size:11px !important;
}
main.mx-auto > section.card:nth-of-type(2) .kbd,
main.mx-auto > section.card:nth-of-type(2) .mt-5,
main.mx-auto > section.card:nth-of-type(2) .soft{display:none !important;}
/* Estructura principal */
main.mx-auto > section.mt-10.grid{
  margin-top:18px !important;
  grid-template-columns:minmax(530px,1fr) minmax(540px,1fr) !important;
  gap:18px !important;
}
.card{
  border-radius:16px !important;
  border:1px solid #e6ebf1 !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:var(--shadow) !important;
}
main.mx-auto > section.mt-10.grid > .card{
  padding:20px 22px !important;
}
.card h2{
  font-size:16px !important;
  font-weight:1000 !important;
  letter-spacing:-.02em !important;
}
.card .flex.items-center.gap-3 > span{
  width:28px !important;
  height:28px !important;
  border-radius:10px !important;
  background:#ecfdf3 !important;
}
.card p.mt-2{
  margin-top:8px !important;
  font-size:11px !important;
  color:#667085 !important;
  font-weight:700 !important;
}
/* Zona de carga */
#dropzone{
  margin-top:14px !important;
  min-height:205px;
  padding:18px !important;
  border:1.8px dashed #cfd8e3 !important;
  border-radius:14px !important;
  background:#fbfdff !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
#dropzone:hover{border-color:rgba(57,169,0,.55) !important;background:#f8fff9 !important;}
#dropzone .w-14,
#dropzone .sm\:w-16{
  width:46px !important;
  height:46px !important;
  border-radius:14px !important;
  background:#f1fff4 !important;
  color:var(--sena) !important;
}
#dzIcon{color:var(--sena) !important;font-size:20px !important;}
#dropzone .text-sm.font-black{font-size:14px !important;}
#dropzone .text-xs{font-size:12px !important;}
#fileMeta span{
  border-radius:10px !important;
  border-color:#d9e1ea !important;
  padding:8px 12px !important;
}
label:has(#fileInput), .btn-sena{
  border-radius:12px !important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--sena) 90%,white),color-mix(in srgb,var(--sena) 84%,#0f172a)) !important;
  box-shadow:0 8px 18px rgba(57,169,0,.25) !important;
}
#btnDownloadSample,#btnDownloadPromptIA{
  color:var(--sena) !important;
  font-size:12px !important;
  text-decoration-thickness:2px;
}
/* Modos */
.mode-seg{
  gap:10px !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  width:100%;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.mode-btn{
  justify-content:center;
  height:40px;
  border-radius:8px !important;
  border:1px solid #dce4ee !important;
  background:#fff !important;
  letter-spacing:.06em !important;
  font-size:12px !important;
  box-shadow:0 3px 10px rgba(15,23,42,.04);
}
.mode-btn[data-mode="evaluation"][aria-pressed="true"]{color:#475467 !important;background:#fff !important;border-color:#dce4ee !important;}
.mode-btn[data-mode="practice"][aria-pressed="true"]{color:#7c3aed !important;background:#faf7ff !important;border-color:#e7d7ff !important;}
.mode-btn[data-mode="millionaire"][aria-pressed="true"]{color:#ea580c !important;background:#fff7ed !important;border-color:#fed7aa !important;}
.mode-btn[data-mode="parques"][aria-pressed="true"]{color:#fff !important;background:linear-gradient(180deg,#3b82f6,#2563eb) !important;border-color:#2563eb !important;box-shadow:0 8px 16px rgba(37,99,235,.25) !important;}
#modeDesc{display:none !important;}
/* Paneles inferiores */
#sheetSelect,.card input,.card select{
  border-radius:9px !important;
  border:1px solid #d9e1ea !important;
  background:#fff !important;
  min-height:38px;
  padding:9px 12px !important;
  font-size:13px !important;
  font-weight:700 !important;
  color:#344054 !important;
}
.card input:focus,.card select:focus{
  outline:none !important;
  border-color:#86d78d !important;
  box-shadow:0 0 0 3px rgba(57,169,0,.10) !important;
}
/* No bloquear interacción por estilos heredados en tarjetas bloqueadas visualmente */
.card .pointer-events-none input:not(:disabled),
.card .pointer-events-none select:not(:disabled),
.card .pointer-events-none button:not(:disabled){pointer-events:auto !important;}
.card .opacity-60{opacity:.88 !important;}
#genPreviewQ,.rounded-2xl.border.border-slate-200.bg-white.p-3{
  border-radius:12px !important;
}
/* Estadísticas */
.soft{
  border-radius:14px !important;
  background:#fff !important;
  border:1px solid #e6ebf1 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.soft .rounded-2xl{
  border-radius:12px !important;
}
#statTotal,#statValid,#statSingle,#statMulti,#statQTotal,#topReady{
  font-size:24px !important;
  color:#2563eb !important;
}
#statValid{color:var(--sena) !important;}
/* Configuración */
/* Apariencia de tabs, sin modificar funcionalidad */
.card:has(#cfgTitle) > .mt-6.grid:first-of-type::before{
  content:'General                 Juego                 Equipos                 Seguridad';
  display:block;
  grid-column:1/-1;
  white-space:pre;
  word-spacing:72px;
  border-bottom:1px solid #dce4ee;
  padding:0 0 11px 54px;
  margin-bottom:2px;
  color:#475467;
  font-size:12px;
  font-weight:1000;
}
.card:has(#cfgTitle) > .mt-6.grid:first-of-type::after{
  content:'';
  grid-column:1/-1;
  order:-1;
}
.card:has(#cfgTitle) .text-\[11px\]{
  color:#475467 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:11px !important;
}
#cfgTitle{grid-column:1/-1;}
#cfgTitle,#cfgInstructor,#cfgTheme,#cfgCount,#cfgOptions,#cfgParquesTeams,#cfgParquesTime,#cfgParquesBoardSize{
  height:38px !important;
}
#parquesTeamsWrap,#parquesTimeWrap,#parquesBoardWrap{display:block;}
#parquesTeamsWrap.hidden,#parquesTimeWrap.hidden,#parquesBoardWrap.hidden{display:none !important;}
#parquesTeamsWrap .mt-1,#parquesTimeWrap .mt-1,#parquesBoardWrap .mt-1{font-size:11px !important;color:#667085 !important;}
.card label.soft{
  min-height:74px;
  padding:14px !important;
}
.card label.soft input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  min-height:18px !important;
  accent-color:var(--sena) !important;
}
.card label.soft .text-sm{font-size:13px !important;}
.card label.soft .text-xs{font-size:11px !important;}
#timerRow,#pinRow{margin-top:8px !important;}
#cfgPin{padding-right:52px !important;}
#btnPreview,#btnGenerate,#btnExportCSV,#btnClearResults,#btnClearSearch,#btnShowIssues,#btnClearFile{
  border-radius:10px !important;
  min-height:38px;
  letter-spacing:.05em !important;
}
#btnGenerate{
  background:linear-gradient(180deg,color-mix(in srgb,var(--sena) 90%,white),color-mix(in srgb,var(--sena) 84%,#0f172a)) !important;
  box-shadow:0 10px 18px rgba(57,169,0,.24) !important;
}
#btnPreview{
  background:#fff !important;
  border-color:#dce4ee !important;
  color:#101828 !important;
}
/* Visor resultados */
section:has(#resultsTbody){
  width:100% !important;
  margin-top:18px !important;
}
section:has(#resultsTbody) > div{
  background:#fff !important;
  border:1px solid #e6ebf1 !important;
  border-radius:16px !important;
  box-shadow:var(--shadow) !important;
}
#resultsTbody tr td{font-size:12px !important;}
thead th{font-size:10px !important;}
/* Footer */
footer{display:none !important;}
@media (max-width:1100px){
  main.mx-auto > section.mt-10.grid{grid-template-columns:1fr !important;}
  main.mx-auto > section.card:nth-of-type(2) ol{grid-template-columns:1fr !important;}
}
@media (max-width:720px){
  main.mx-auto{padding-left:12px !important;padding-right:12px !important;}
  main.mx-auto > section.text-center:first-child{margin-left:-12px;margin-right:-12px;padding:0 18px;height:auto;min-height:78px;}
  main.mx-auto > section.text-center:first-child h1{font-size:30px !important;}
  main.mx-auto > section.text-center:first-child p{display:none !important;}
  .mode-seg{grid-template-columns:1fr 1fr !important;}
}



/* ===== Identidad LokyApps heredada de ImageQuizz ===== */
.lokyFooter{
  display:block !important;
  width:100vw;
  margin:30px 0 0 calc(50% - 50vw);
  padding:0;
}
.lokyFooterCard{
  width:100%;margin:0;background:#fff;border:0;
  border-top:1px solid rgba(37,99,235,.16);border-radius:0;
  box-shadow:0 -10px 28px rgba(15,23,42,.06);
  padding:20px max(24px,7.5vw);display:flex;align-items:center;
  justify-content:center;gap:18px;
}
.lokyFooterLogo{width:170px;height:auto;max-height:96px;object-fit:contain;display:block;flex:0 0 auto;}
.lokyFooterCopy{min-width:0;text-align:left}
.lokyFooterRole{
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  background:#eff6ff;border:1px solid rgba(37,99,235,.16);
  font-size:10px;font-weight:1000;letter-spacing:.18em;text-transform:uppercase;color:#1d4ed8
}
.lokyFooterRole::before{content:"";width:7px;height:7px;border-radius:50%;background:#2563eb;opacity:.95}
.lokyFooterText{margin-top:8px;max-width:720px;font-size:12px;font-weight:750;color:#475569;line-height:1.5}
@media(max-width:720px){
  .lokyFooterCard{padding:18px 20px;gap:18px}
  .lokyFooterLogo{width:145px;max-height:84px}
  .lokyFooterText{font-size:11px}
}
@media(max-width:480px){
  .lokyFooterCard{flex-direction:column;text-align:center;padding:22px 16px}
  .lokyFooterLogo{width:160px;max-height:92px}
  .lokyFooterCopy{text-align:center} .lokyFooterRole{justify-content:center} .lokyFooterText{margin-left:auto;margin-right:auto}
}

/* Presentación inicial del index principal: 3 segundos */
body.indexIntroActive{overflow:hidden}
body.indexIntroActive > main{opacity:0;pointer-events:none}
body > main{transition:opacity .32s ease}
.indexIntro{
  position:fixed;inset:0;z-index:20000;display:grid;place-items:center;
  background:radial-gradient(circle at center,#ffffff 0%,#f6f8fb 62%,#e2e8f0 100%);
  opacity:1;visibility:visible;overflow:hidden;
}
.indexIntroLogo{
  width:min(46vw,430px);height:min(46vw,430px);max-width:68vh;max-height:68vh;
  object-fit:contain;display:block;opacity:0;transform:scale(.72);
  will-change:transform,opacity;animation:indexLogoZoom 3s cubic-bezier(.22,.75,.25,1) forwards;
}
.indexIntro.done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s linear .18s}
@keyframes indexLogoZoom{0%{opacity:0;transform:scale(.72)}14%{opacity:1;transform:scale(1)}68%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1.48)}}
@media(max-width:700px){.indexIntroLogo{width:min(74vw,340px);height:min(74vw,340px);max-width:58vh;max-height:58vh}}
@media(prefers-reduced-motion:reduce){
  .indexIntroLogo{animation:indexLogoFade 3s ease forwards}
  @keyframes indexLogoFade{0%{opacity:0;transform:scale(.97)}15%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.06)}}
}

/* LokyQuiz · personalización institucional */
.brandConfigBox{grid-column:1/-1;border:1px solid #dbe4ee;border-radius:16px;background:#f8fafc;padding:16px;margin-top:2px}
.brandConfigGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,250px);gap:14px;align-items:end}
.brandLogoRow{margin-top:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brandLogoPreview{width:92px;height:92px;display:grid;place-items:center;flex:0 0 92px;background:#fff;border:1px solid #dbe4ee;border-radius:14px;overflow:hidden}
.brandLogoPreview img{max-width:82px;max-height:82px;object-fit:contain}
.brandLogoInfo{flex:1;min-width:220px}.brandLogoInfo .ttl{font-size:12px;font-weight:1000;color:#0f172a}.brandLogoInfo .txt{font-size:11px;font-weight:700;color:#64748b;line-height:1.4;margin-top:4px}
.brandLogoActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.brandLogoActions button{min-height:38px;padding:8px 12px;border-radius:10px;border:1px solid #dbe4ee;background:#fff;font-size:11px;font-weight:900;cursor:pointer}
.brandColorInput{height:42px!important;padding:4px!important;cursor:pointer}
.brandRule{margin-top:12px;padding:10px 12px;border-left:4px solid var(--sena);background:#fff;border-radius:10px;font-size:11px;color:#475569;font-weight:750;line-height:1.45}
@media(max-width:640px){.brandConfigGrid{grid-template-columns:1fr}.brandLogoPreview{width:78px;height:78px;flex-basis:78px}.brandLogoPreview img{max-width:70px;max-height:70px}}
.brandExperienceGrid{display:grid;grid-template-columns:minmax(170px,.85fr) minmax(220px,1fr) minmax(220px,1fr);gap:12px;margin-top:14px}
.brandThemeSelect{width:100%;min-height:42px;border:1px solid #dbe4ee;border-radius:11px;background:#fff;padding:8px 11px;font-size:12px;font-weight:900;color:#334155}
.expSwitch{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid #dbe4ee;border-radius:12px;background:#fff;cursor:pointer;min-height:66px}
.expSwitch input{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--sena)}
.expSwitch .t{font-size:12px;font-weight:1000;color:#0f172a}.expSwitch .d{margin-top:3px;font-size:10px;font-weight:700;line-height:1.35;color:#64748b}
@media(max-width:900px){.brandExperienceGrid{grid-template-columns:1fr 1fr}.brandExperienceGrid>div:first-child{grid-column:1/-1}}
@media(max-width:640px){.brandExperienceGrid{grid-template-columns:1fr}.brandExperienceGrid>div:first-child{grid-column:auto}}

/* Apariencia base del generador */
html[data-loky-theme="oscuro"] body{background:#0b1220!important;color:#e5e7eb!important}
html[data-loky-theme="oscuro"] .card,html[data-loky-theme="oscuro"] .soft,html[data-loky-theme="oscuro"] .brandConfigBox{background:#111827!important;border-color:#334155!important}
html[data-loky-theme="oscuro"] .card input,html[data-loky-theme="oscuro"] .card select,html[data-loky-theme="oscuro"] .brandLogoPreview,html[data-loky-theme="oscuro"] .expSwitch{background:#0f172a!important;border-color:#334155!important;color:#f8fafc!important}
html[data-loky-theme="oscuro"] .card .text-slate-900,html[data-loky-theme="oscuro"] .card .text-slate-800,html[data-loky-theme="oscuro"] .expSwitch .t{color:#f8fafc!important}
html[data-loky-theme="oscuro"] .card .text-slate-500,html[data-loky-theme="oscuro"] .card .text-slate-400,html[data-loky-theme="oscuro"] .expSwitch .d{color:#cbd5e1!important}
html[data-loky-theme="academico"] body{background:#f1f5f9!important}
html[data-loky-theme="academico"] .card{border-color:#cbd5e1!important;box-shadow:0 10px 28px rgba(30,64,175,.08)!important}
html[data-loky-theme="academico"] .brandConfigBox{background:#eff6ff!important;border-color:#bfdbfe!important}
html[data-loky-theme="corporativo"] body{background:#f8fafc!important}
html[data-loky-theme="corporativo"] .card{border-radius:10px!important;box-shadow:0 6px 18px rgba(15,23,42,.06)!important}
html[data-loky-theme="corporativo"] .soft,html[data-loky-theme="corporativo"] .brandConfigBox{border-radius:10px!important}
html[data-loky-theme="gamificado"] body{background:radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--sena) 12%,white),transparent 30%),#f8fafc!important}
html[data-loky-theme="gamificado"] .card{box-shadow:0 15px 35px color-mix(in srgb,var(--sena) 12%,transparent)!important}


/* LokyQuiz V5: configuración simplificada */
.brandExperienceGridTwo{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.brandColorRow{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:center;width:100%;min-width:0;}
.brandColorInput{width:72px!important;min-width:72px!important;height:42px!important;margin:0!important;}
.brandColorHex{width:100%!important;min-width:0!important;max-width:100%!important;height:42px!important;padding:8px 10px!important;font-size:13px!important;font-weight:900!important;text-transform:uppercase;color:#334155;box-sizing:border-box!important;}
.brandColorHex.is-invalid{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.12)!important;}
.mode-btn[aria-pressed="false"]{opacity:.58;filter:saturate(.55);}
.mode-btn[data-mode="evaluation"][aria-pressed="true"]{color:#fff!important;background:var(--sena)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--sena) 88%,#22c55e 12%),color-mix(in srgb,var(--sena) 86%,#0f172a 14%))!important;border-color:var(--sena)!important;box-shadow:0 8px 18px rgba(15,23,42,.16)!important;opacity:1!important;filter:none!important;}
.mode-btn[data-mode="practice"][aria-pressed="true"],.mode-btn[data-mode="millionaire"][aria-pressed="true"],.mode-btn[data-mode="parques"][aria-pressed="true"]{opacity:1!important;filter:none!important;}
@media(max-width:760px){.brandConfigGrid{grid-template-columns:1fr!important}.brandExperienceGridTwo{grid-template-columns:1fr!important}.brandColorRow{grid-template-columns:64px minmax(0,1fr)}}


/* ===== LokyQuiz · Header + ventanas de Personalización / Cómo funciona ===== */
main.mx-auto > section.text-center:first-child.lokyTopHeader{justify-content:space-between!important;gap:18px!important;}
.lokyHeaderBrand{display:flex;align-items:center;gap:14px;min-width:0;flex:1 1 auto}
.lokyHeaderBrand>.lokyProductLogo{width:58px!important;height:58px!important;flex:0 0 58px!important;margin:0!important;object-fit:contain!important;filter:none!important}
.lokyHeroCopy{min-width:0;text-align:left}.lokyHeroCopy h1{font-size:32px!important;white-space:nowrap}.lokyHeroCopy p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.lokyHeaderInstitution{display:flex;align-items:center;gap:10px;min-width:190px;max-width:310px;padding:7px 11px;border:1px solid #e1e7ef;border-radius:13px;background:#fff}
.lokyHeaderInstitution img{width:40px!important;height:40px!important;flex:0 0 40px!important;margin:0!important;border-radius:9px;object-fit:contain!important;filter:none!important}
.lokyHeaderInstitutionText{display:flex;flex-direction:column;min-width:0;text-align:left;line-height:1.08}.lokyHeaderInstitutionText small{font-size:8px;font-weight:1000;letter-spacing:.13em;color:#98a2b3}.lokyHeaderInstitutionText strong{font-size:11px;font-weight:1000;color:#344054;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lokyHeaderActions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex:0 0 auto}.lokyHeaderBtn{min-height:38px;padding:8px 11px;border-radius:10px;border:1px solid #dbe3ec;background:#fff;color:#344054;font-size:11px;font-weight:1000;cursor:pointer;white-space:nowrap;box-shadow:none}.lokyHeaderBtn:hover{background:#f8fafc;border-color:#cbd5e1}.lokyHeaderBtn.primary{background:var(--sena);border-color:var(--sena);color:#fff}
.lokyModal{width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 28px);padding:0;border:1px solid #dbe3ec;border-radius:20px;background:#fff;color:#0f172a;box-shadow:0 28px 80px rgba(15,23,42,.28);overflow:auto}.lokyModal[open]{position:fixed!important;top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;margin:0!important;transform:translate(-50%,-50%)!important}.lokyModal::backdrop{background:rgba(15,23,42,.58);backdrop-filter:blur(4px)}
.lokyModalHead{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 17px;border-bottom:1px solid #e5e7eb;background:#fff}.lokyModalHead h2{margin:0;font-size:18px;font-weight:1000;letter-spacing:-.02em}.lokyModalHead p{margin:4px 0 0;font-size:11px;font-weight:700;color:#667085;line-height:1.4}.lokyModalClose{width:38px;height:38px;flex:0 0 38px;border-radius:50%;border:1px solid #dbe3ec;background:#fff;color:#475467;font-size:18px;font-weight:1000;cursor:pointer}
.lokyModalBody{padding:17px}.lokyModalFoot{position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:13px 17px;border-top:1px solid #e5e7eb;background:#f8fafc}.lokyModalAction{min-height:40px;padding:8px 12px;border-radius:10px;border:1px solid #dbe3ec;background:#fff;color:#344054;font-size:12px;font-weight:1000;cursor:pointer}.lokyModalAction.primary{background:var(--sena);border-color:var(--sena);color:#fff}.lokyModalAction.restore{margin-right:auto}
.lokyModal .brandConfigBox{margin:0!important;padding:0!important;border:0!important;background:transparent!important}.lokyModal .brandConfigBox>.text-\[11px\]{display:none!important}
.lokyHowGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.lokyHowStep{border:1px solid #e2e8f0;border-radius:14px;padding:12px;background:#f8fafc}.lokyHowStep b{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--sena);color:#fff;font-size:12px;margin-bottom:8px}.lokyHowStep strong{display:block;font-size:12px}.lokyHowStep span{display:block;margin-top:4px;font-size:10px;line-height:1.4;color:#667085;font-weight:700}.lokyHowModes{margin-top:14px;padding:12px;border:1px solid #dbe3ec;border-radius:14px;background:#fff}.lokyHowModes strong{font-size:12px}.lokyHowModes p{margin:6px 0 0;font-size:11px;line-height:1.5;color:#667085;font-weight:700}
@media(max-width:980px){main.mx-auto > section.text-center:first-child.lokyTopHeader{flex-wrap:wrap;height:auto!important;min-height:82px!important;padding-top:10px!important;padding-bottom:10px!important}.lokyHeaderBrand{flex:1 1 calc(100% - 260px)}.lokyHeaderInstitution{order:3;flex:1 1 100%;max-width:none}}
@media(max-width:680px){.lokyHeaderBrand{flex:1 1 100%}.lokyHeroCopy h1{font-size:27px!important}.lokyHeroCopy p{display:block!important;font-size:10px!important;white-space:normal}.lokyHeaderActions{width:100%;justify-content:stretch}.lokyHeaderBtn{flex:1 1 0}.lokyHowGrid{grid-template-columns:1fr}.lokyModalFoot{justify-content:stretch}.lokyModalAction{flex:1 1 auto}.lokyModalAction.restore{margin-right:0;flex-basis:100%}}