/* Editor de Etapas (pestaña admin del Vocabulario) */
#vocOrden{ padding-top:4px }
.oe-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px }
.oe-ciclos{ display:flex; gap:6px }
.oe-cic{ min-height:40px; padding:8px 14px; border-radius:99px; border:2px solid var(--border);
  background:#fff; font-weight:800; color:var(--deep); cursor:pointer; transition:all .15s }
.oe-cic.on{ background:var(--purple); border-color:var(--purple); color:#fff }
.oe-cic:hover{ border-color:var(--purple-light) }
.oe-resumen{ font-weight:700; color:var(--deep); opacity:.8; margin-left:auto }
.oe-actions{ display:flex; gap:8px }
.oe-btn{ min-height:40px; padding:8px 14px; border-radius:12px; border:none; font-weight:800;
  cursor:pointer; transition:filter .15s }
.oe-btn:hover{ filter:brightness(1.06) }
.oe-btn.dl{ background:#E8E5FB; color:var(--purple-hover) }
.oe-btn.up{ background:var(--purple); color:#fff }

.oe-help{ font-size:.86rem; color:var(--deep); opacity:.75; margin:0 0 10px; line-height:1.5 }
.oe-help b{ color:var(--purple-hover) }

/* rejilla de TARJETAS, desplazable. Cada tarjeta = imagen de estudio + nombre en inglés */
.oe-lista{ list-style:none; margin:0; padding:4px; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px;
  max-height:calc(100vh - 232px); overflow-y:auto; overscroll-behavior:contain }
.oe-etapa{ grid-column:1/-1; display:flex; align-items:center; gap:8px; margin:12px 0 0; padding:4px 6px;
  font-weight:900; color:var(--purple-hover); font-size:.8rem; letter-spacing:.04em; text-transform:uppercase;
  cursor:grab; user-select:none; border-radius:9px; transition:background .12s, box-shadow .12s }
.oe-etapa:first-child{ margin-top:0 }
.oe-etapa:hover{ background:rgba(124,58,237,.06) }
.oe-etapa.dragging{ opacity:.4 }
.oe-etapa.over{ background:rgba(124,58,237,.14); box-shadow:inset 0 0 0 2px var(--purple) }
.oe-etapa-h{ color:var(--purple-light); font-size:1rem; cursor:grab }
.oe-etapa::after{ content:''; flex:1; height:2px; background:linear-gradient(90deg,var(--purple-light),transparent); border-radius:2px }

.oe-card{ position:relative; display:flex; flex-direction:column; background:#fff;
  border:2px solid var(--border); border-radius:16px; padding:8px; cursor:grab;
  transition:border-color .15s, box-shadow .15s, transform .1s }
.oe-card:hover{ border-color:var(--purple-light); box-shadow:0 4px 14px rgba(124,58,237,.10) }
.oe-card.lad{ background:#FFFBEB; border-color:#FDE68A }
.oe-card.dragging{ opacity:.4 }
.oe-card.over{ border-color:var(--purple); box-shadow:0 6px 18px rgba(124,58,237,.22); transform:translateY(-2px) }

.oe-thumb{ position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden;
  background:#F3F1FB; display:flex; align-items:center; justify-content:center }
.oe-ph{ font-size:2rem; opacity:.45 }
.oe-studyimg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .25s }
.oe-studyimg.loaded{ opacity:1 }

.oe-name{ margin-top:8px; width:100%; min-height:40px; border:none; background:#F3F1FB;
  border-radius:10px; padding:6px 8px; font-weight:800; font-size:.95rem; color:var(--deep);
  cursor:pointer; transition:background .15s }
.oe-name::before{ content:'▶'; color:var(--purple); font-size:.72em; margin-right:5px; vertical-align:1px }
.oe-name:hover{ background:#E8E5FB }
.oe-name:active{ transform:scale(.97) }
.oe-name:focus-visible{ outline:2px solid var(--purple); outline-offset:2px }

/* chips sobre la miniatura */
.oe-num{ position:absolute; top:6px; left:6px; z-index:3; font-weight:800; font-size:.72rem;
  color:#fff; background:rgba(60,50,110,.6); border-radius:8px; padding:1px 6px; font-variant-numeric:tabular-nums }
.oe-badge{ position:absolute; bottom:6px; left:6px; z-index:3; font-size:1rem;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) }
.oe-drag{ position:absolute; bottom:6px; left:50%; transform:translateX(-50%); z-index:3;
  color:#fff; font-size:.95rem; background:rgba(60,50,110,.45); border-radius:8px; padding:0 8px;
  cursor:grab; opacity:0; transition:opacity .15s }
.oe-card:hover .oe-drag{ opacity:.9 }
/* lupa: ampliar la imagen. Visible siempre (usable en táctil), resalta en hover */
.oe-zoom{ position:absolute; top:6px; right:6px; z-index:4; width:28px; height:28px; padding:0;
  border:none; border-radius:9px; background:rgba(60,50,110,.6); color:#fff; font-size:.8rem;
  display:flex; align-items:center; justify-content:center; cursor:zoom-in;
  opacity:.9; transition:opacity .15s, background .15s, transform .1s }
.oe-card:hover .oe-zoom{ opacity:1 }
.oe-zoom:hover{ background:var(--purple) } .oe-zoom:active{ transform:scale(.9) }
.oe-zoom:focus-visible{ outline:2px solid #fff; outline-offset:1px }

/* lightbox de imagen ampliada */
.oe-lightbox{ position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:0; padding:24px; cursor:zoom-out;
  background:rgba(20,16,40,.84); opacity:0; transition:opacity .18s }
.oe-lightbox.on{ opacity:1 }
.oe-lightbox figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:10px }
.oe-lightbox img{ max-width:92vw; max-height:82vh; border-radius:18px; box-shadow:0 16px 48px rgba(0,0,0,.55) }
.oe-lightbox figcaption{ color:#fff; font-weight:800; font-size:1.1rem; letter-spacing:.02em }
.oe-lb-close{ position:absolute; top:16px; right:20px; width:46px; height:46px; border:none; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--deep); font-size:1.15rem; font-weight:900; cursor:pointer }
.oe-lb-close:hover{ background:#fff }

@media (max-width:560px){
  .oe-resumen{ margin-left:0; width:100% }
  .oe-lista{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; max-height:calc(100vh - 210px) }
  .oe-name{ font-size:.82rem; min-height:36px }
}