/* ============================================================
   juegos_curso.css - Estilos de los juegos interactivos
   Curso: Legislacion Educativa Colombiana - COMFAGUAJIRA
   Prof. Mag. Orlando de Jesus Carcamo Berrio

   Se carga UNA sola vez en el sitio (enlazado o embebido).
   Da estilo a:
   1) Concurso "Quien quiere ser auxiliar?"  (.qqa)
   2) "Arma la escalera del sistema"         (.esc)

   NOTA: el HTML de cada juego que se pega en el Libro de Moodle
   ya NO necesita llevar su bloque <style>; este archivo lo cubre.
============================================================ */

/* ============ JUEGO 1 - CONCURSO (.qqa) ============ */
/* ===== Estilos del concurso (prefijo .qqa). Solo CSS. ===== */
.curso-lec .qqa{--q-verde:#1F6B4C;--q-verde-osc:#164d37;--q-ambar:#C8871B;--q-azul:#3b4a5a;
  max-width:560px;margin:1rem auto;background:#fff;border:1px solid #dde3e0;
  border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(31,107,76,.10);}
.curso-lec .qqa-pantalla{padding:26px 20px;text-align:center;}
.curso-lec .qqa-logo{font-size:3rem;line-height:1;margin-bottom:.3rem;}
.curso-lec .qqa h2{color:var(--q-verde);font-size:1.4rem;margin:.2rem 0;}
.curso-lec .qqa-sub{color:var(--q-ambar);font-weight:700;font-size:.9rem;margin:.2rem 0 1rem;}
.curso-lec .qqa-instr{color:#3a463f;font-size:.95rem;line-height:1.55;margin-bottom:1.4rem;}
.curso-lec .qqa-btn{background:var(--q-verde);color:#fff;border:none;border-radius:30px;
  padding:13px 30px;font-size:1.05rem;font-weight:700;cursor:pointer;
  box-shadow:0 3px 0 var(--q-verde-osc);transition:transform .08s;}
.curso-lec .qqa-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--q-verde-osc);}
.curso-lec .qqa-btn-sec{background:var(--q-azul);box-shadow:0 3px 0 #26313c;font-size:.95rem;padding:11px 24px;}
.curso-lec .qqa-barra{display:flex;justify-content:space-between;align-items:center;
  font-size:.85rem;font-weight:700;color:var(--q-verde);margin-bottom:8px;}
.curso-lec .qqa-puntos{background:#fff4de;color:var(--q-ambar);padding:3px 12px;border-radius:20px;}
.curso-lec .qqa-progreso-bar{height:7px;background:#e8eeeb;border-radius:6px;overflow:hidden;margin-bottom:18px;}
.curso-lec .qqa-progreso-fill{height:100%;width:12.5%;background:linear-gradient(90deg,var(--q-ambar),var(--q-verde));
  border-radius:6px;transition:width .35s ease;}
.curso-lec .qqa-pregunta{font-size:1.12rem;font-weight:600;color:#243027;line-height:1.5;
  text-align:left;margin:0 0 16px;}
.curso-lec .qqa-opciones{display:flex;flex-direction:column;gap:10px;}
.curso-lec .qqa-opcion{background:#f4f7f5;border:2px solid #dde3e0;border-radius:12px;
  padding:13px 16px;font-size:1rem;text-align:left;cursor:pointer;color:#243027;
  transition:all .12s;line-height:1.4;width:100%;}
.curso-lec .qqa-opcion:hover{border-color:var(--q-verde);background:#eef5f1;}
.curso-lec .qqa-opcion.correcta{border-color:#2e7d4f;background:#e3f4ea;font-weight:700;}
.curso-lec .qqa-opcion.incorrecta{border-color:#c0392b;background:#fbe9e7;}
.curso-lec .qqa-opcion:disabled{cursor:default;}
.curso-lec .qqa-feedback{margin-top:18px;padding:14px 16px;border-radius:12px;
  background:#f4f7f5;text-align:left;}
.curso-lec .qqa-feedback-texto{font-size:.92rem;color:#3a463f;line-height:1.5;margin:0 0 12px;}
.curso-lec .qqa-feedback.ok{background:#e3f4ea;}
.curso-lec .qqa-feedback.no{background:#fbe9e7;}
.curso-lec .qqa-final-puntaje{font-size:1.6rem;font-weight:800;color:var(--q-verde);margin:.4rem 0;}
.curso-lec .qqa-final-mensaje{color:#3a463f;font-size:.98rem;line-height:1.55;margin-bottom:1.4rem;}
@media(max-width:400px){
  .curso-lec .qqa h2{font-size:1.2rem;}
  .curso-lec .qqa-pregunta{font-size:1.02rem;}
}

/* ============ JUEGO 2 - ESCALERA (.esc) ============ */
.curso-lec .esc{--e-verde:#1F6B4C;--e-verde-osc:#164d37;--e-ambar:#C8871B;--e-azul:#3b4a5a;
  max-width:560px;margin:1rem auto;background:#fff;border:1px solid #dde3e0;border-radius:16px;
  padding:22px 18px;box-shadow:0 4px 20px rgba(31,107,76,.10);}
.curso-lec .esc-cab{text-align:center;margin-bottom:18px;}
.curso-lec .esc-logo{font-size:2.6rem;line-height:1;}
.curso-lec .esc h2{color:var(--e-verde);font-size:1.3rem;margin:.2rem 0;}
.curso-lec .esc-sub{color:var(--e-ambar);font-weight:700;font-size:.85rem;margin:.1rem 0 .8rem;}
.curso-lec .esc-instr{color:#3a463f;font-size:.92rem;line-height:1.5;text-align:left;
  background:#f4f7f5;border-radius:10px;padding:11px 14px;margin:0;}
.curso-lec .esc-lista{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:9px;}
.curso-lec .esc-item{display:flex;align-items:center;gap:10px;background:#eef5f1;
  border:2px solid #cfe3d8;border-radius:12px;padding:12px 12px;cursor:grab;
  transition:border-color .15s,background .15s;}
.curso-lec .esc-item.arrastrando{opacity:.5;border-style:dashed;}
.curso-lec .esc-item.ok{border-color:#2e7d4f;background:#e3f4ea;}
.curso-lec .esc-item.mal{border-color:#c0392b;background:#fbe9e7;}
.curso-lec .esc-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:var(--e-ambar);color:#fff;font-weight:800;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;}
.curso-lec .esc-texto{flex:1;text-align:left;line-height:1.35;}
.curso-lec .esc-texto strong{display:block;color:var(--e-verde-osc);font-size:1rem;}
.curso-lec .esc-texto span{font-size:.8rem;color:#5a6a60;}
.curso-lec .esc-flechas{display:flex;flex-direction:column;gap:3px;flex-shrink:0;}
.curso-lec .esc-flecha{width:30px;height:24px;border:none;border-radius:6px;
  background:var(--e-azul);color:#fff;font-size:.75rem;cursor:pointer;line-height:1;}
.curso-lec .esc-flecha:disabled{opacity:.25;cursor:default;}
.curso-lec .esc-flecha:active{background:var(--e-verde);}
.curso-lec .esc-acciones{display:flex;gap:10px;justify-content:center;margin-top:6px;}
.curso-lec .esc-btn{background:var(--e-verde);color:#fff;border:none;border-radius:26px;
  padding:11px 24px;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:0 3px 0 var(--e-verde-osc);}
.curso-lec .esc-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--e-verde-osc);}
.curso-lec .esc-btn-sec{background:var(--e-azul);box-shadow:0 3px 0 #26313c;}
.curso-lec .esc-resultado{margin-top:16px;padding:14px 16px;border-radius:12px;
  text-align:center;font-size:1rem;line-height:1.5;}
.curso-lec .esc-resultado.ok{background:#e3f4ea;color:#1c5c3a;}
.curso-lec .esc-resultado.no{background:#fff4de;color:#8a5b12;}
/* ============ ACTIVIDAD 2.1 - Fines de la educacion (.act) ============ */
.curso-lec .act-btn{background:#1F6B4C;color:#fff;border:none;border-radius:26px;
  padding:12px 22px;font-size:1rem;font-weight:700;cursor:pointer;
  box-shadow:0 3px 0 #164d37;transition:transform .08s;display:inline-block;margin:6px 0;}
.curso-lec .act-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #164d37;}
.curso-lec .act-btn-prep{background:#C8871B;box-shadow:0 3px 0 #9a6614;}
.curso-lec .act-btn-prep:active{box-shadow:0 1px 0 #9a6614;}
.curso-lec .act-btn-copiar{background:#3b4a5a;box-shadow:0 3px 0 #26313c;font-size:.95rem;padding:10px 20px;margin-top:8px;}
.curso-lec .act-btn-copiar:active{box-shadow:0 1px 0 #26313c;}
.curso-lec .act-form{margin-top:12px;}
.curso-lec .act-campo-nombre{display:block;margin-bottom:14px;}
.curso-lec .act-campo-nombre span{display:block;font-weight:700;color:#164d37;
  font-size:.9rem;margin-bottom:5px;}
.curso-lec .act-input-nombre{width:100%;box-sizing:border-box;border:2px solid #cfe3d8;
  border-radius:10px;padding:11px 13px;font-size:1rem;color:#243027;background:#fff;}
.curso-lec .act-input-nombre:focus{outline:none;border-color:#1F6B4C;}
.curso-lec .act-fila{background:#f4f7f5;border-left:4px solid #1F6B4C;border-radius:0 10px 10px 0;
  padding:12px 14px;margin-bottom:12px;}
.curso-lec .act-fila-fin{font-weight:600;color:#243027;font-size:.98rem;line-height:1.4;margin:0 0 8px;}
.curso-lec .act-fila-num{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;background:#C8871B;color:#fff;border-radius:50%;
  font-weight:800;font-size:.82rem;vertical-align:middle;margin-right:4px;}
.curso-lec .act-textarea{width:100%;box-sizing:border-box;border:2px solid #cfe3d8;
  border-radius:10px;padding:11px 13px;font-size:1rem;color:#243027;background:#fff;
  font-family:inherit;line-height:1.5;resize:vertical;min-height:56px;}
.curso-lec .act-textarea:focus{outline:none;border-color:#1F6B4C;}
.curso-lec .act-salida{margin-top:14px;padding:14px 16px;border-radius:12px;}
.curso-lec .act-salida-aviso{background:#fff4de;color:#8a5b12;font-size:.95rem;line-height:1.5;}
.curso-lec .act-salida-ok{background:#e3f4ea;}
.curso-lec .act-salida-tit{font-weight:800;color:#1c5c3a;font-size:1.05rem;margin:0 0 4px;}
.curso-lec .act-salida-ayuda{color:#3a463f;font-size:.9rem;line-height:1.5;margin:0 0 10px;}
.curso-lec .act-salida-texto{width:100%;box-sizing:border-box;border:2px solid #cfe3d8;
  border-radius:10px;padding:11px 13px;font-size:.92rem;color:#243027;background:#fff;
  font-family:inherit;line-height:1.5;resize:vertical;}
.curso-lec .act-copiado{color:#1c5c3a;font-weight:700;font-size:.9rem;margin-left:10px;}
/* ============================================================
   JUEGOS DE REPASO - UNIDAD 1
   Anexar al final de juegos_curso.css
   Paleta del curso con valores de respaldo.
   Movil-first, validado a 390px sin desbordamiento horizontal.
   ============================================================ */

.curso-lec .juego-repaso{
  border:1px solid var(--verde,#1F6B4C);
  border-radius:12px;
  padding:14px 12px 16px;
  margin:18px 0;
  background:#fbfdfb;
}
.curso-lec .juego-repaso .juego-titulo{
  display:flex; align-items:center; gap:8px;
  margin:0 0 4px; font-size:1.05rem; line-height:1.25;
  color:var(--verde-oscuro,#124434); font-weight:800;
}
.curso-lec .juego-repaso .juego-titulo .icono{ font-size:1.2rem; }
.curso-lec .juego-repaso .juego-instr{
  margin:0 0 12px; font-size:.9rem; color:#3d4a44;
}
.curso-lec .juego-repaso .marcador{
  font-weight:700; color:var(--verde,#1F6B4C);
}

/* ---------- barra de mensajes comun ---------- */
.curso-lec .sopa-msg,
.curso-lec .cruci-msg,
.curso-lec .emp-msg{
  min-height:1.3em; margin:10px 0 0; font-weight:700; font-size:.92rem;
}
.curso-lec .bien{ color:#1F6B4C; }
.curso-lec .mal{  color:#b23b2e; }

/* ============================================================
   1) SOPA DE LETRAS
   ============================================================ */
.curso-lec .sopa-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:2px;
  max-width:360px;
  margin:6px auto 4px;
  touch-action:manipulation;
}
.curso-lec .sopa-cel{
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:0; cursor:pointer;
  font-family:inherit; font-weight:700;
  font-size:clamp(.62rem,3.1vw,.92rem);
  color:#26332d; background:#e9f1ec; border-radius:4px;
  user-select:none; -webkit-user-select:none;
  transition:background .12s, color .12s, transform .05s;
}
.curso-lec .sopa-cel.sel{ background:var(--ambar,#C8871B); color:#fff; }
.curso-lec .sopa-cel.ok{
  background:var(--verde,#1F6B4C); color:#fff; cursor:default;
}
.curso-lec .sopa-lista{
  list-style:none; padding:0; margin:10px 0 0;
  display:flex; flex-wrap:wrap; gap:6px 10px; justify-content:center;
}
.curso-lec .sopa-word{
  font-size:.82rem; font-weight:700; letter-spacing:.3px;
  color:var(--verde-oscuro,#124434);
  padding:2px 6px; border-radius:6px; background:#eef4f0;
}
.curso-lec .sopa-word.ok{
  text-decoration:line-through; color:#8aa79a; background:#f4f8f6;
}

/* ============================================================
   2) CRUCIGRAMA
   ============================================================ */
.curso-lec .cruci-wrap{ overflow-x:auto; }
.curso-lec .cruci-grid{
  display:grid;
  grid-template-columns:repeat(13,minmax(0,1fr));
  gap:2px;
  max-width:360px;
  margin:6px auto 4px;
}
.curso-lec .cruci-block{ background:transparent; aspect-ratio:1/1; }
.curso-lec .cruci-cel{
  position:relative; aspect-ratio:1/1;
  background:#fff; border:1px solid #cdd8d2; border-radius:3px;
}
.curso-lec .cruci-num{
  position:absolute; top:0; left:1px;
  font-size:.42rem; line-height:1; color:#8a7a52; font-weight:700;
  pointer-events:none;
}
.curso-lec .cruci-in{
  width:100%; height:100%; border:0; background:transparent;
  text-align:center; text-transform:uppercase;
  font-family:inherit; font-weight:700;
  font-size:clamp(.6rem,2.9vw,.9rem); color:#20302a;
  padding:0; outline:none;
}
.curso-lec .cruci-in:focus{ background:#fff6e6; }
.curso-lec .cruci-cel:has(.cruci-in.ok){ background:#dcefe4; border-color:var(--verde,#1F6B4C); }
.curso-lec .cruci-cel:has(.cruci-in.mal){ background:#fbe3df; border-color:#b23b2e; }
.curso-lec .cruci-in.ok{ color:var(--verde-oscuro,#124434); }
.curso-lec .cruci-in.mal{ color:#b23b2e; }

.curso-lec .cruci-pistas{ margin:12px 0 0; }
.curso-lec .cruci-pistas h4{
  margin:8px 0 4px; font-size:.92rem; color:var(--verde-oscuro,#124434);
}
.curso-lec .cruci-pistas ol{ margin:0; padding-left:1.2em; }
.curso-lec .cruci-pistas li{ font-size:.86rem; margin:3px 0; line-height:1.35; }

.curso-lec .juego-botones{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;
}
.curso-lec .btn-juego{
  font-family:inherit; font-size:.88rem; font-weight:700;
  border:0; border-radius:8px; padding:8px 14px; cursor:pointer;
  color:#fff; background:var(--verde,#1F6B4C);
}
.curso-lec .btn-juego.secundario{
  background:#fff; color:var(--verde-oscuro,#124434);
  border:1px solid var(--verde,#1F6B4C);
}

/* ============================================================
   3) EMPAREJAR
   ============================================================ */
.curso-lec .emp-tablero{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin:6px 0 0; align-items:start;
}
.curso-lec .emp-col h4{
  margin:0 0 6px; font-size:.85rem; text-align:center;
  color:var(--verde-oscuro,#124434);
}
.curso-lec .emp-concepto,
.curso-lec .emp-norma{
  display:block; width:100%; text-align:left;
  font-family:inherit; font-size:.8rem; line-height:1.25;
  margin:0 0 6px; padding:8px 9px; cursor:pointer;
  border-radius:8px; border:1px solid #cdd8d2; background:#fff;
  color:#26332d; transition:background .12s, border-color .12s, transform .05s;
}
.curso-lec .emp-norma{ text-align:center; font-weight:700; }
.curso-lec .emp-concepto.sel,
.curso-lec .emp-norma.sel{
  border-color:var(--ambar,#C8871B); background:#fff6e6;
}
.curso-lec .emp-concepto.ok,
.curso-lec .emp-norma.ok{
  background:var(--verde,#1F6B4C); color:#fff;
  border-color:var(--verde,#1F6B4C); cursor:default;
}
.curso-lec .emp-norma.shake{ animation:empShake .35s; }
@keyframes empShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  75%{ transform:translateX(4px); }
}

/* ---------- ajuste fino en pantallas muy estrechas ---------- */
@media (max-width:360px){
  .curso-lec .emp-concepto,
  .curso-lec .emp-norma{ font-size:.74rem; padding:7px 7px; }
  .curso-lec .sopa-word{ font-size:.76rem; }
}