/* =======================================================================
   wiki-mini.css — minijuegos interactivos embebidos en los artículos.
   Widgets "Pruébalo": el estudiante HACE el concepto donde lo lee.
   Paleta de la wiki (acento azul físico #2f6fb0). Autocontenido, sin dependencias.
======================================================================= */
.wm-embed{
  --wm-accent:#2f6fb0; --wm-ink:#1f2a37; --wm-muted:#5b6b7a;
  --wm-line:#dbe4ef; --wm-ok:#2e9e6b; --wm-no:#d1607f; --wm-warn:#c98a2e;
  margin:32px 0; border:1px solid var(--wm-line); border-radius:16px;
  background:linear-gradient(180deg,#f3f7fc,#ffffff);
  overflow:hidden; font-family:'Inter',system-ui,sans-serif;
}
.wm-embed *{box-sizing:border-box;}
.wm-head{display:flex; align-items:center; gap:9px; padding:13px 18px;
  background:#eaf2fb; border-bottom:1px solid var(--wm-line);}
.wm-head .wm-tag{font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:var(--wm-accent); padding:3px 9px; border-radius:999px;}
.wm-head .wm-title{font-weight:700; font-size:.96rem; color:var(--wm-ink); letter-spacing:-.01em;}
.wm-body{padding:18px;}
.wm-sub{color:var(--wm-muted); font-size:.9rem; line-height:1.5; margin:0 0 14px;}
.wm-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.wm-col{display:flex; flex-direction:column; gap:10px;}
.wm-spacer{flex:1;}
.wm-btn{font-family:inherit; font-weight:700; font-size:.86rem; cursor:pointer; border:1px solid var(--wm-line);
  background:#fff; color:var(--wm-ink); padding:8px 14px; border-radius:10px; transition:.12s;}
.wm-btn:hover{border-color:var(--wm-accent);}
.wm-btn.on{background:var(--wm-accent); border-color:var(--wm-accent); color:#fff;}
.wm-btn.ghost{background:transparent;}
.wm-seg{display:inline-flex; border:1px solid var(--wm-line); border-radius:10px; overflow:hidden;}
.wm-seg button{font-family:inherit; font-weight:700; font-size:.82rem; cursor:pointer; border:none;
  background:#fff; color:var(--wm-muted); padding:8px 12px; transition:.12s;}
.wm-seg button+button{border-left:1px solid var(--wm-line);}
.wm-seg button.on{background:var(--wm-accent); color:#fff;}
.wm-label{font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wm-muted);}

/* --- Grilla tipo Punnett / matriz (reutilizable) --- */
.wm-punnett{display:grid; grid-template-columns:auto auto; gap:16px; align-items:start;}
.wm-grid{display:grid; grid-template-columns:34px 1fr 1fr; grid-template-rows:34px 1fr 1fr;
  gap:6px; width:230px;}
.wm-cell{display:grid; place-items:center; border-radius:9px; font-weight:800; font-size:1.05rem;
  min-height:56px; transition:.2s;}
.wm-gam{background:#eef4f9; color:#3a6ea5; font-size:1rem;}
.wm-corner{background:transparent;}
.wm-off{border:1.5px solid var(--wm-line); background:#fff; color:var(--wm-ink);}
.wm-off.domi{background:#e9f6ef; border-color:#bfe6cf; color:#1e6b45;}
.wm-off.rece{background:#fbeef2; border-color:#f0cdd9; color:#a23a5e;}
.wm-off.pop{animation:wmpop .35s;}
@keyframes wmpop{0%{transform:scale(.6); opacity:0;}70%{transform:scale(1.12);}100%{transform:scale(1);}}
.wm-readout{min-width:180px; flex:1;}
.wm-ratio{font-weight:800; font-size:1.15rem; color:var(--wm-ink); margin:2px 0 8px;}
.wm-bar{height:22px; border-radius:7px; overflow:hidden; display:flex; border:1px solid var(--wm-line);}
.wm-bar i{display:block; height:100%; transition:width .3s;}
.wm-bar .b-domi{background:#5ec08c;} .wm-bar .b-rece{background:#e58aa8;}
.wm-legend{display:flex; gap:14px; margin-top:8px; font-size:.8rem; color:var(--wm-muted); flex-wrap:wrap;}
.wm-legend b{color:var(--wm-ink);}
.wm-dot{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:middle;}
.wm-insight{margin-top:14px; padding:10px 14px; border-radius:10px; background:#eef4fb;
  border-left:3px solid var(--wm-accent); font-size:.88rem; color:#1d4d7c; line-height:1.5;}

/* --- Secuencia / ordenar pasos (reutilizable) --- */
.wm-seq-pool{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.wm-chip{font-family:inherit; font-weight:700; font-size:.82rem; cursor:pointer; border:1.5px solid var(--wm-line);
  background:#fff; color:var(--wm-ink); padding:9px 13px; border-radius:11px; transition:.12s; display:flex; gap:6px; align-items:center;}
.wm-chip:hover:not(:disabled){border-color:var(--wm-accent); transform:translateY(-1px);}
.wm-chip:disabled{opacity:.35; cursor:default;}
.wm-chip .ic{font-size:1.05rem;}
.wm-track{display:flex; gap:6px; flex-wrap:wrap; align-items:center; min-height:52px;
  padding:10px; border-radius:11px; background:#f4f8fc; border:1px dashed var(--wm-line);}
.wm-slot{display:flex; gap:6px; align-items:center; font-weight:700; font-size:.82rem;
  padding:9px 12px; border-radius:10px; background:#e9f6ef; border:1.5px solid #bfe6cf; color:#1e6b45; animation:wmpop .3s;}
.wm-arrow{color:var(--wm-accent); font-weight:800;}
.wm-empty{color:var(--wm-muted); font-size:.85rem; font-weight:600;}

.wm-feedback{margin-top:12px; font-weight:700; font-size:.9rem; min-height:1.2em;}
.wm-feedback.ok{color:var(--wm-ok);} .wm-feedback.no{color:var(--wm-no);}

/* --- primitivos genéricos reutilizables por cualquier minijuego --- */
.wm-opts{display:flex; gap:8px; flex-wrap:wrap;}
.wm-opt{font-family:inherit; font-weight:700; font-size:.85rem; cursor:pointer; border:1.5px solid var(--wm-line);
  background:#fff; color:var(--wm-ink); padding:9px 14px; border-radius:11px; transition:.12s; display:flex; gap:7px; align-items:center;}
.wm-opt:hover:not(:disabled){border-color:var(--wm-accent); transform:translateY(-1px);}
.wm-opt.on{background:var(--wm-accent); border-color:var(--wm-accent); color:#fff;}
.wm-opt.ok{background:#e9f6ef; border-color:#bfe6cf; color:#1e6b45;}
.wm-opt.no{background:#fbeef2; border-color:#f0cdd9; color:#a23a5e;}
.wm-opt:disabled{cursor:default;}
.wm-opt .ic{font-size:1.05rem;}
.wm-slider-row{display:flex; align-items:center; gap:12px; margin:8px 0;}
.wm-slider-row label{min-width:120px; font-size:.82rem; font-weight:700; color:var(--wm-muted);}
.wm-slider-row input[type=range]{flex:1; accent-color:var(--wm-accent); height:26px;}
.wm-slider-row .val{min-width:64px; text-align:right; font-weight:800; color:var(--wm-ink); font-size:.95rem;}
.wm-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px;}
.wm-tile{border:1.5px solid var(--wm-line); border-radius:11px; background:#fff; cursor:pointer;
  padding:12px 8px; text-align:center; font-weight:700; font-size:.82rem; color:var(--wm-ink); transition:.12s;}
.wm-tile:hover:not(:disabled){border-color:var(--wm-accent);}
.wm-tile.on{border-color:var(--wm-accent); background:#eaf2fb;}
.wm-tile.ok{border-color:#bfe6cf; background:#e9f6ef; color:#1e6b45;}
.wm-tile.no{border-color:#f0cdd9; background:#fbeef2; color:#a23a5e;}
.wm-tile .big{font-size:1.5rem; display:block; margin-bottom:3px;}
/* emparejar en dos columnas (tocar izquierda, luego derecha) */
.wm-match{display:grid; grid-template-columns:1fr 1fr; gap:10px 22px;}
.wm-match-col{display:flex; flex-direction:column; gap:8px;}
.wm-match-item{border:1.5px solid var(--wm-line); border-radius:11px; background:#fff; cursor:pointer;
  padding:10px 12px; font-weight:700; font-size:.84rem; color:var(--wm-ink); transition:.12s; text-align:left;}
.wm-match-item:hover:not(:disabled){border-color:var(--wm-accent);}
.wm-match-item.sel{border-color:var(--wm-accent); background:#eaf2fb;}
.wm-match-item.done{border-color:#bfe6cf; background:#e9f6ef; color:#1e6b45; cursor:default;}
.wm-match-item.done::after{content:" ✓"; color:var(--wm-ok);}
.wm-scene{position:relative; border-radius:12px; background:#f4f8fc; border:1px solid var(--wm-line);
  overflow:hidden; margin:6px 0 12px;}
.wm-scene svg{display:block; width:100%; height:auto;}
.wm-note{font-size:.82rem; color:var(--wm-muted); margin-top:6px;}

@media (max-width:560px){
  .wm-punnett{grid-template-columns:1fr;}
  .wm-grid{width:100%; max-width:260px; margin:0 auto;}
  .wm-match{grid-template-columns:1fr;}
  .wm-slider-row label{min-width:90px;}
}