/* ==========================================================================
   «CONEXIONES» — ventana superpuesta sobre la ficha de un OA.
   Se abre desde el botón de la barra de acciones y se cierra SIN mover el
   scroll de la página: el alumno vuelve exactamente a su punto de lectura.
   Mobile-first: en pantalla chica la caja ocupa el viewport entero; en
   escritorio es una ventana centrada con lectura editorial (una columna).
   Cada cápsula se pinta con el color de su tipo (--wc) en el riel, el chip
   y los acentos, para escanear visualmente sin leer el rótulo.
   ========================================================================== */

/* ---- ventana ---- */
.lo-world-modal { position: fixed; inset: 0; z-index: 130; display: grid; justify-items: center; align-items: stretch; padding: 0; background: rgba(8, 12, 18, .62); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; }
.lo-world-modal.open { opacity: 1; visibility: visible; }
.lo-world-box { display: flex; flex-direction: column; width: 100%; height: 100%; max-height: 100%; background: var(--bg); border: 0; overflow: hidden; transform: translateY(10px) scale(.99); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.lo-world-modal.open .lo-world-box { transform: none; }

.lo-world-head { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); border-bottom: 1px solid var(--line); }
.lo-world-head::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 60%); opacity: .5; }
.lo-world-head > div { flex: 1; min-width: 0; }
.lo-world-eyebrow { margin: 0 0 3px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.lo-world-title { margin: 0; font-size: 21px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.lo-world-x { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; }
.lo-world-x:hover { background: var(--accent); color: #fff; transform: rotate(90deg); }
.lo-world-hint { margin: 12px 16px 0; line-height: 1.45; }

/* El cuerpo es el único que hace scroll: la página de atrás no se mueve. */
.lo-world-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; gap: 16px; padding: 16px; align-content: start; }
.lo-world-foot { display: flex; justify-content: center; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.lo-world-foot .button { min-width: 200px; font-size: 14px; }
body.lo-world-on { overflow: hidden; }
/* Con la ventana abierta el lorito del tutor no interrumpe: sprite, bocadillo y
   dock de control (capa z=10001 / fijo sobre el backdrop) se esconden hasta cerrar. */
body.lo-world-on .cb-agent, body.lo-world-on .cb-tt, body.lo-world-on #lumbre-companion { display: none !important; }

/* ---- cápsula ---- */
@keyframes wc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.wc-card { --wc: var(--accent); --wc-bg: var(--accent-soft); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 18px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--wc); border-radius: 16px; box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.lo-world-modal.open .wc-card { animation: wc-in .32s ease backwards; }
.lo-world-modal.open .wc-card:nth-child(2) { animation-delay: .05s; }
.lo-world-modal.open .wc-card:nth-child(3) { animation-delay: .1s; }
.lo-world-modal.open .wc-card:nth-child(n+4) { animation-delay: .15s; }
.wc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.wc-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; background: var(--wc-bg); color: var(--wc); }
.wc-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wc); }
.wc-title { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 750; letter-spacing: -.01em; }
.wc-explain { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 68ch; }

/* Ejemplo real identificable: panel destacado con su propio marcador. */
.wc-ref { margin: 0; padding: 10px 12px 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--wc) 8%, var(--bg)); border: 1px solid color-mix(in srgb, var(--wc) 22%, var(--line)); font-size: 14px; line-height: 1.5; }
.wc-ref-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--wc); margin-bottom: 3px; }
.wc-ref-tag::before { content: "◈"; font-size: 11px; }
.wc-ref-detail { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }

/* Medio de apoyo: encuadrado, con atribución legible. */
.wc-media { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.wc-media img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.wc-media audio { width: 100%; }
.wc-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: var(--shadow-sm); }
.wc-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wc-attr { font-size: 12px; color: var(--muted); line-height: 1.45; }

/* Invitación a hacer algo con la idea: se nota que es opcional y no puntúa. */
.wc-action { margin: 0; display: flex; gap: 9px; align-items: flex-start; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, var(--wc) 9%, var(--bg)); border: 1px dashed color-mix(in srgb, var(--wc) 45%, transparent); font-size: 14.5px; line-height: 1.5; }
.wc-action-icon { flex: none; color: var(--wc); font-weight: 800; }

/* Salida opcional hacia otro OA: kicker arriba, título protagonista, nota discreta y flecha fija a la derecha. */
.wc-links { display: grid; gap: 8px; }
.wc-link { position: relative; display: block; padding: 12px 42px 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); text-decoration: none; color: var(--ink); transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.wc-link:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateX(2px); }
.wc-link::after { content: "→"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--accent); font-weight: 800; font-size: 16px; transition: transform .15s ease; }
.wc-link:hover::after { transform: translateY(-50%) translateX(3px); }
.wc-link-k { display: inline-block; margin-bottom: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); white-space: nowrap; }
.wc-link-t { display: block; font-size: 15px; font-weight: 650; line-height: 1.35; }
.wc-link-n { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* Fuente verificable, siempre al pie y discreta. */
.wc-src { margin: 2px 0 0; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; color: var(--muted); }
.wc-src a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.wc-src a:hover { border-bottom-color: var(--accent); }

/* ---- color por tipo de conexión (claro): la paleta vive en la TARJETA (data-kind),
     el chip y los paneles la heredan por cascada. */
.wc-card[data-kind="art"]        { --wc: #7c3aed; --wc-bg: #f3e8ff; }
.wc-card[data-kind="history"]    { --wc: #b45309; --wc-bg: #fef3c7; }
.wc-card[data-kind="people"]     { --wc: #be123c; --wc-bg: #ffe4e6; }
.wc-card[data-kind="daily_life"] { --wc: #15803d; --wc-bg: #dcfce7; }
.wc-card[data-kind="nature"]     { --wc: #047857; --wc-bg: #d1fae5; }
.wc-card[data-kind="technology"] { --wc: #1d4ed8; --wc-bg: #dbeafe; }
.wc-card[data-kind="crafts"]     { --wc: #c2410c; --wc-bg: #ffedd5; }
.wc-card[data-kind="places"]     { --wc: #0369a1; --wc-bg: #e0f2fe; }
.wc-card[data-kind="cultures"]   { --wc: #be185d; --wc-bg: #fce7f3; }
@media (prefers-color-scheme: dark) {
  .wc-card[data-kind="art"]        { --wc: #d8b4fe; --wc-bg: #2e1065; }
  .wc-card[data-kind="history"]    { --wc: #fcd34d; --wc-bg: #451a03; }
  .wc-card[data-kind="people"]     { --wc: #fda4af; --wc-bg: #4c0519; }
  .wc-card[data-kind="daily_life"] { --wc: #86efac; --wc-bg: #052e16; }
  .wc-card[data-kind="nature"]     { --wc: #6ee7b7; --wc-bg: #022c22; }
  .wc-card[data-kind="technology"] { --wc: #93c5fd; --wc-bg: #172554; }
  .wc-card[data-kind="crafts"]     { --wc: #fdba74; --wc-bg: #431407; }
  .wc-card[data-kind="places"]     { --wc: #7dd3fc; --wc-bg: #082f49; }
  .wc-card[data-kind="cultures"]   { --wc: #f9a8d4; --wc-bg: #500724; }
  .lo-world-modal { background: rgba(3, 6, 10, .7); }
}

/* Botón de la barra de acciones: se distingue como puerta a «otro lugar». */
.world-cta { display: inline-flex; align-items: center; gap: 7px; }
.world-cta svg { color: var(--accent); }

/* ---- tablet / escritorio: la caja deja de ser pantalla completa ---- */
@media (min-width: 780px) {
  .lo-world-modal { align-items: center; padding: 28px; }
  .lo-world-box { width: min(760px, 100%); height: min(88vh, 800px); max-height: 88vh; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 60px -20px rgba(8, 12, 18, .45); }
  .lo-world-body { padding: 18px 22px 22px; }
  .lo-world-head { padding: 20px 22px 14px; }
  .lo-world-head::after { left: 22px; right: 22px; }
  .wc-card { padding: 20px 22px 20px 24px; }
  .wc-media img { max-height: 360px; }
}
/* Pantalla muy ancha: se permite el escaneo en dos columnas sin apretar la lectura. */
@media (min-width: 1240px) {
  .lo-world-box { width: min(1040px, 100%); }
  .lo-world-body { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .lo-world-modal, .lo-world-box, .wc-card, .wc-link, .wc-link::after, .lo-world-x { transition: none; }
  .lo-world-x:hover, .wc-card:hover, .wc-link:hover { transform: none; }
  .lo-world-modal.open .wc-card { animation: none; }
}