/* ============================================================
   JUEGO · "El telar de los cuatro hilos" · Unidad 3  (v2)
   Humanización del Servicio en la Primera Infancia — COMFAGUAJIRA
   Subir a own-styles/ y enlazar en el HEAD (sin /public/):
   <link rel="stylesheet" href=".../theme/own-styles/estilo_juego_telar.css?v=2">
   v2: BLINDAJE contra estilos heredados del tema de Moodle
       (position/float/display) que superponían las fichas.
   Todo scoped bajo .curso-humanizacion .telar
   ============================================================ */

.curso-humanizacion .telar {
  --tj-morado: var(--morado, #6A4C93);
  --tj-morado-osc: #4a3468;
  --tj-turquesa: var(--turquesa, #00A9A5);
  --tj-amarillo: var(--amarillo, #FFC845);
  --tj-coral: var(--coral, #FF6B6B);
  --tj-verde: var(--verde, #7FB800);
  --tj-crema: var(--crema, #FFF9F0);
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--gris, #3a3a3a);
  max-width: 900px; margin: 0 auto;
  position: relative;
}

/* ===== BLINDAJE: neutraliza herencias del tema en TODOS los hijos ===== */
.curso-humanizacion .telar,
.curso-humanizacion .telar * {
  box-sizing: border-box;
  float: none !important;
  position: static;   /* evita el absolute heredado que superpone */
}
/* el encabezado y el logro sí pueden ser 'relative' para sus adornos */
.curso-humanizacion .telar__cab { position: relative; }
.curso-humanizacion .telar__cab::after { position: absolute; }

/* Encabezado del juego */
.curso-humanizacion .telar__cab {
  overflow: hidden;
  background: linear-gradient(135deg, var(--tj-morado), var(--tj-morado-osc));
  color: #fff; border-radius: 20px; padding: 26px 30px; margin: 4px 0 20px;
  box-shadow: 0 10px 30px rgba(106,76,147,.22);
  display: block;
}
.curso-humanizacion .telar__cab::after {
  content: ""; right: -30px; top: -30px; width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,200,69,.18), transparent 70%); border-radius: 50%;
}
.curso-humanizacion .telar__cab h2 {
  font-family: 'Fraunces', Georgia, serif; margin: 0 0 6px; color: #fff;
  font-size: clamp(1.4rem, 3vw, 1.9rem); position: relative; z-index: 1;
}
.curso-humanizacion .telar__cab p { margin: 0; opacity: .95; position: relative; z-index: 1; }

/* Instrucciones */
.curso-humanizacion .telar__intro {
  background: #f3ecfb; border-left: 5px solid var(--tj-morado); border-radius: 0 12px 12px 0;
  padding: 12px 18px; margin-bottom: 18px; font-size: .95rem; line-height: 1.6; display: block;
}

/* Barra de estado */
.curso-humanizacion .telar__estado {
  display: flex !important; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin: 0 0 18px;
}
.curso-humanizacion .telar__progreso-wrap {
  flex: 1 1 240px; background: #eadff5; border-radius: 100px; height: 16px; overflow: hidden;
}
.curso-humanizacion .telar__progreso {
  height: 100%; width: 0%; border-radius: 100px;
  background: linear-gradient(90deg, var(--tj-turquesa), var(--tj-verde));
  transition: width .4s ease;
}
.curso-humanizacion .telar__marcador { font-weight: 800; color: var(--tj-morado); white-space: nowrap; }
.curso-humanizacion .telar__intentos { font-weight: 700; color: var(--gris-suave, #8a8279); font-size: .9rem; }

/* Banco de fichas */
.curso-humanizacion .telar__banco {
  background: var(--tj-crema); border: 2px dashed #d9c9ec; border-radius: 16px;
  padding: 14px; margin-bottom: 20px;
  display: flex !important; flex-wrap: wrap !important; gap: 10px; min-height: 60px;
  align-content: flex-start;
}
.curso-humanizacion .telar__banco-titulo {
  flex-basis: 100%; width: 100%; font-weight: 800; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tj-morado); margin: 0 0 2px; display: block;
}

/* Ficha (concepto arrastrable) — inline-flex para que fluya en filas */
.curso-humanizacion .telar .ficha {
  display: inline-flex !important; align-items: center;
  background: #fff; border: 2px solid var(--tj-morado); color: var(--tj-morado-osc);
  border-radius: 100px; padding: 8px 16px; margin: 0; font-weight: 700; font-size: .92rem;
  line-height: 1.2; white-space: normal; max-width: 100%;
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
  box-shadow: 0 3px 8px rgba(0,0,0,.08); transition: transform .15s, box-shadow .15s, opacity .2s;
  vertical-align: top;
}
.curso-humanizacion .telar .ficha:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.14); }
.curso-humanizacion .telar .ficha.arrastrando { opacity: .5; cursor: grabbing; }
.curso-humanizacion .telar .ficha.colocada { background: var(--tj-verde); border-color: var(--tj-verde); color: #fff; cursor: default; }

/* Rejilla de hilos (zonas de destino) */
.curso-humanizacion .telar__hilos {
  display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
@media (max-width: 620px) {
  .curso-humanizacion .telar__hilos { grid-template-columns: 1fr !important; }
}

.curso-humanizacion .telar .hilo {
  background: #fff; border-radius: 16px; border: 2px solid #ece3f5;
  box-shadow: 0 6px 18px rgba(0,0,0,.06); overflow: hidden;
  display: flex !important; flex-direction: column; min-width: 0;
}
.curso-humanizacion .telar .hilo__cab {
  background: var(--tj-morado); color: #fff; padding: 10px 14px; font-weight: 800;
  font-size: .98rem; display: flex !important; align-items: center; gap: 8px;
}
.curso-humanizacion .telar .hilo__num {
  background: rgba(255,255,255,.22); border-radius: 50%; width: 26px; height: 26px;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: .85rem; flex: 0 0 auto;
}
.curso-humanizacion .telar .hilo__zona {
  padding: 12px; min-height: 92px;
  display: flex !important; flex-wrap: wrap !important; gap: 8px;
  align-content: flex-start; transition: background .2s;
}
.curso-humanizacion .telar .hilo__zona.resaltada { background: #f3ecfb; outline: 2px dashed var(--tj-morado); outline-offset: -6px; }

/* Ficha ya soltada dentro de un hilo (un poco más pequeña) */
.curso-humanizacion .telar .hilo__zona .ficha { font-size: .86rem; padding: 6px 13px; }

/* Zócalo de retroalimentación */
.curso-humanizacion .telar__feedback {
  margin-top: 8px; min-height: 24px; font-weight: 700; text-align: center;
  border-radius: 12px; padding: 6px 10px; transition: background .2s; display: block;
}
.curso-humanizacion .telar__feedback.ok { color: #2f6a00; background: #eef6dd; }
.curso-humanizacion .telar__feedback.mal { color: #b23; background: #ffe9e9; }

/* Botones */
.curso-humanizacion .telar__acciones { display: flex !important; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.curso-humanizacion .telar .telar__btn {
  border: none; border-radius: 100px; padding: 11px 24px; font-weight: 800; font-size: .95rem;
  cursor: pointer; font-family: inherit; transition: transform .12s, box-shadow .12s; display: inline-block;
}
.curso-humanizacion .telar .telar__btn:hover { transform: translateY(-2px); }
.curso-humanizacion .telar .telar__btn--primario { background: var(--tj-morado); color: #fff; box-shadow: 0 6px 16px rgba(106,76,147,.3); }
.curso-humanizacion .telar .telar__btn--sec { background: #fff; color: var(--tj-morado); border: 2px solid var(--tj-morado); }

/* Panel de logro final */
.curso-humanizacion .telar__logro {
  display: none; margin-top: 20px; text-align: center;
  background: linear-gradient(135deg, var(--tj-turquesa), var(--tj-verde));
  color: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 10px 30px rgba(0,124,121,.22);
}
.curso-humanizacion .telar__logro.visible { display: block !important; animation: telar-aparece .5s ease; }
.curso-humanizacion .telar__logro h3 { font-family: 'Fraunces', Georgia, serif; color: #fff; margin: 0 0 8px; font-size: 1.5rem; }
.curso-humanizacion .telar__logro p { margin: 0; opacity: .96; }
@keyframes telar-aparece { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }