/*
 * Estilos de los Laboratorios Lumbre (galería /labs y pantalla de matemáticas).
 * Se cargan SÓLO en las vistas de /labs: el resto del sitio no los ve.
 * Reutiliza los tokens de app.css (paleta, radios, espaciados) — no define colores propios.
 */

/* Botón flotante de silencio compartido (lumbre-sound.js): una píldora discreta abajo a la derecha.
   Sin colores propios —todo tokens de app.css— y despejada de la barra segura del móvil. */
.lumbre-sound-toggle { position: fixed; right: 14px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; font-size: 14px; font-weight: 500; line-height: 1; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); cursor: pointer; }
.lumbre-sound-toggle:hover { border-color: var(--accent); color: var(--accent); }
.lumbre-sound-toggle.active { color: var(--accent); }
@media (max-width: 600px) { .lumbre-sound-toggle { right: 10px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 7px 11px; font-size: 13px; } }

/* ---------- Galería ---------- */
.lab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.lab-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.lab-card h2 { margin: 0; font: 400 22px/1.25 var(--font-reading); }
.lab-card p { margin: 0; flex: 1 1 auto; }
.lab-card .button { align-self: stretch; }
.lab-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); }
.lab-soon { opacity: .78; }
.lab-soon .lab-icon { background: var(--bg); color: var(--muted); }
.lab-soon .chip { align-self: flex-start; }

/* ---------- Pantalla del laboratorio ---------- */
.lab-page { padding-top: var(--space-6); padding-bottom: var(--space-8); }
.lab-head { display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.lab-head h1 { margin: 0 0 4px; font: 400 clamp(26px, 4vw, 36px)/1.15 var(--font-reading); }
.lab-head > div { flex: 1 1 320px; min-width: 0; }
.lab-level { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); align-self: flex-start; padding-top: var(--space-2); }
.lab-level select { min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }

.lab-input-panel { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); display: grid; gap: var(--space-4); }
.lab-ask { font-weight: 600; }
math-field.lab-mathfield { display: block; width: 100%; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); color: var(--ink); font-size: 22px; }
math-field.lab-mathfield:focus-within { border-color: var(--accent); }

.lab-examples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.lab-examples .chip { cursor: pointer; }
.lab-examples .chip:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.lab-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.lab-output { margin-top: var(--space-5); padding: var(--space-5); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-md); background: var(--surface); }
.lab-output h2 { margin: 0 0 var(--space-4); font: 400 20px/1.3 var(--font-reading); }
.lab-steps { list-style: decimal; margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-4); }
.lab-step { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); }
.lab-step .lab-tex { display: block; font-size: 19px; overflow-x: auto; }
.lab-op { margin: 6px 0; font-size: 13px; color: var(--warm); }
.lab-result { margin: var(--space-4) 0 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.lab-result .lab-tex { display: inline-block; }
.lab-note { margin: var(--space-3) 0 0; color: var(--muted); }
.lab-error { color: var(--danger); }
/* Aclaración del paso (el «por qué» con palabras sencillas, bajo la operación). */
.lab-tip { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* ---------- Panel pedagógico «¿Cómo funciona?» ---------- */
.lab-guide { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.lab-guide summary { cursor: pointer; font: 600 17px/1.4 var(--font-reading); color: var(--accent); }
.lab-guide-lead { margin: var(--space-3) 0 0; color: var(--muted); font-size: 14px; }
.lab-guide-sec { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.lab-guide-sec h2 { margin: 0 0 var(--space-2); font: 600 17px/1.3 var(--font-reading); }
.lab-guide-sec p, .lab-guide-sec li { font-size: 15px; line-height: 1.7; }
.lab-guide-sec ul, .lab-guide-sec ol { padding-left: var(--space-5); margin: var(--space-2) 0; }
.lab-guide-sec .ML__latex { display: inline-block; vertical-align: middle; }

/* ---------- Entrenador de pasos ---------- */
.lab-trainer { margin-top: var(--space-5); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); display: grid; gap: var(--space-4); }
.lab-trainer h3 { margin: 0; font: 600 18px/1.3 var(--font-reading); }
.lab-trainer-current { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; color: var(--muted); }
.lab-trainer-current .lab-tex { font-size: 20px; color: var(--ink); }
math-field.lab-mathfield-sm { font-size: 20px; }
.lab-step-own { border-style: dashed; border-color: var(--accent); }
.lab-trainer-feedback { margin: 0; min-height: 22px; font-weight: 600; }
.lab-trainer-feedback.good { color: var(--ok, #2e7d32); }
.lab-trainer-feedback.bad { color: var(--danger); }
.lab-trainer-feedback.idle { color: var(--muted); font-weight: 400; }
.lab-trainer .lab-steps { margin-top: var(--space-2); }

/* ---------- Gráficas (JSXGraph) ---------- */
.lab-graph-mount { margin-top: var(--space-4); }
.lab-board { width: 100%; height: 440px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); }
.lab-graph-caption { margin-top: var(--space-3); font-size: 14px; line-height: 1.7; color: var(--muted); }
.lab-graph-caption .lab-tex { display: inline-block; color: var(--ink); }

@media (max-width: 720px) {
    .lab-page { width: calc(100% - 32px); }
    .lab-input-panel { padding: var(--space-4); }
    .lab-actions .button { flex: 1 1 100%; }
    .lab-board { height: 320px; }
    .lab-iframe-wrap iframe { height: 400px; }
    .lab-sim-canvas { height: 320px; }
    .periodic-grid { font-size: 9px; }
    .periodic-cell { min-height: 36px; }
    .lab-viewer-inputs { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .lab-card, .lab-examples .chip, .button { transition: none; }
    .periodic-cell { transition: none; }
}

/* ---------- Panel de herramientas del laboratorio de matemáticas ---------- */
.lab-tools { margin-top: var(--space-2); }
.lab-tool { text-decoration: none; color: inherit; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.lab-tool:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md, var(--shadow-sm)); }
.lab-tool h2 { font-size: 20px; }
.lab-tool .button { margin-top: var(--space-2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.lab-badge { align-self: flex-start; }

/* ============ Sistemas y ecuaciones libres (CAS sobre math.js) ============ */
/* Estado del motor: LED + texto. Sin animaciones (prefers-reduced-motion por defecto). */
.cas-status { display: flex; align-items: center; gap: .55rem; margin: 0 0 var(--space-3); font-weight: 600; font-size: 14px; }
.cas-led { width: .7rem; height: .7rem; border-radius: 50%; background: var(--line); border: 1px solid var(--muted); flex: none; }
.cas-led.is-ready { background: var(--ok); border-color: var(--ok); }
.cas-led.is-error { background: var(--danger); border-color: var(--danger); }

.cas-textarea { width: 100%; box-sizing: border-box; font: 15px/1.7 ui-monospace, Consolas, "Courier New", monospace; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); resize: vertical; }
.cas-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Salida: soluciones destacadas, comprobación y notas honestas. */
.cas-h2 { margin: 0 0 var(--space-3); font: 600 20px/1.3 var(--font-reading); }
.cas-h { margin: var(--space-4) 0 var(--space-2); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cas-solutions { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-3); padding: 0; }
.cas-solutions li { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); font-size: 18px; }
.cas-solutions .cas-var { font-style: italic; font-family: var(--font-reading); }
.cas-solutions strong { font-size: 22px; color: var(--accent); }
.cas-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.cas-checks li { font-size: 14px; color: var(--muted); }
.cas-checks li.ok::before { content: '✓ '; color: var(--ok); font-weight: 700; }
.cas-checks li.bad::before { content: '✗ '; color: var(--danger); font-weight: 700; }
.cas-note { margin: 0 0 var(--space-3); padding: var(--space-3); border-left: 3px solid var(--warn); background: var(--warn-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; }
.cas-error { margin: 0; padding: var(--space-3); border-left: 3px solid var(--danger); background: var(--danger-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-weight: 600; }

/* ============ Laboratorio de Física ============ */
/* Iframe de PhET */
.lab-iframe-panel { display: grid; gap: var(--space-4); }
.lab-iframe-wrap { position: relative; width: 100%; max-width: 800px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--bg); }
.lab-iframe-wrap iframe { display: block; width: 100%; height: 600px; border: none; }

/* Simulador 2D (Matter.js) */
.lab-sim-panel { display: grid; gap: var(--space-4); }
.lab-sim-controls { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); display: grid; gap: var(--space-3); }
.lab-sim-canvas-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--bg); }
.lab-sim-canvas { display: block; width: 100%; max-width: 800px; height: auto; }

/* Inputs de texto (física/química) */
.lab-text-input { display: block; width: 100%; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); color: var(--ink); font-size: 16px; }
.lab-text-input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.lab-text-input-sm { padding: var(--space-2); font-size: 14px; }
.lab-select { min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }

/* Fórmula: variables dinámicas */
.lab-formula-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lab-formula-vars { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.lab-var-input { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; }
.lab-var-input span { font-weight: 600; min-width: 30px; }

/* ============ Laboratorio de Química ============ */
/* Tabla periódica */
.periodic-cell { transition: transform .1s ease; }
.periodic-cell:hover { transform: scale(1.15); z-index: 2; box-shadow: var(--shadow-md, var(--shadow-sm)); }

/* Ficha de elemento */
.lab-element-detail { position: relative; margin-top: var(--space-4); padding: var(--space-5); border: 1px solid var(--accent); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md, var(--shadow-sm)); }
.lab-detail-close { position: absolute; top: var(--space-3); right: var(--space-3); width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lab-detail-close:hover { background: var(--danger-soft); color: var(--danger); }

/* Visor 3D (3Dmol.js) */
.lab-viewer-inputs { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.lab-viewer-inputs .lab-text-input { flex: 1 1 200px; }

/* Editor de estructuras (JSME) */
.lab-editor-panel { display: grid; gap: var(--space-4); }
.lab-editor-mount { min-height: 400px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); }
.lab-editor-output { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); display: grid; gap: var(--space-3); }
.lab-smiles-output { display: block; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 14px; word-break: break-all; min-height: 44px; }

/* ============ Galería /labs (por niveles, desde BD) ============ */
.labs-gallery .lab-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-4) 0 var(--space-5); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.labs-gallery .lab-filter-search { flex: 1 1 220px; }
.labs-gallery .lab-filter-search input { display: block; width: 100%; min-height: 42px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); color: var(--ink); font-size: 15px; }
.labs-gallery .lab-filter-search input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.labs-gallery .lab-filter-select select { min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.labs-gallery .lab-filter-levels { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.labs-gallery .lab-filter-levels .chip { text-decoration: none; }
.labs-gallery .chip-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.lab-band { margin-top: var(--space-6); }
.lab-band-head h2 { margin: 0 0 2px; font: 400 clamp(22px, 3vw, 28px)/1.2 var(--font-reading); }
.lab-band-head p { margin: 0; }
/* Acento por franja: la galería se reconoce al vuelo por nivel (punto 35). */
.lab-band-primaria .lab-band-head h2 { color: #b45309; }
.lab-band-secundaria .lab-band-head h2 { color: var(--accent); }
.lab-band-preparatoria .lab-band-head h2 { color: #4338ca; }
.lab-card-cover { width: 100%; height: 150px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--line); }
.lab-card-cover.generated-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--accent-soft); color: var(--accent); text-align: center; padding: 10px; }
.lab-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 100%; }
.lab-card-body h3 { margin: 0; font: 600 18px/1.3 var(--font-reading); }
.lab-card-body h3 a { color: inherit; text-decoration: none; }
.lab-card-body h3 a:hover { color: var(--accent); }
.lab-card-body .button { align-self: stretch; text-align: center; }
.lab-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

/* ============ Página del laboratorio (runtime lumbre-lab/1.0) ============ */
.lab-chips { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.lab-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); }
.lab-tab { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 14px/1.3 inherit; cursor: pointer; text-decoration: none; }
.lab-tab:hover { border-color: var(--accent); color: var(--accent); }
.lab-tab.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.lab-tab-done::after { content: ' ✓'; font-weight: 700; }
.lab-activity { margin-top: var(--space-4); }
.lab-activity-title { margin: 0 0 var(--space-2); font: 400 24px/1.25 var(--font-reading); }
.lab-instructions { margin: 0 0 var(--space-4); color: var(--muted); }
.lab-comp { margin: var(--space-4) 0; }
.lab-guide-blocks { margin-top: var(--space-4); }
.lab-hints { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.lab-hints summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.lab-hints ol { margin: var(--space-2) 0 0; padding-left: var(--space-5); display: grid; gap: 6px; }
.lab-attempt-state { margin-top: var(--space-3); }
.lab-related { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.lab-related h2 { margin: 0 0 var(--space-3); font: 400 20px/1.3 var(--font-reading); }
.lab-related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lab-related-link { display: inline-flex; gap: 8px; align-items: baseline; color: var(--ink); text-decoration: none; }
.lab-related-link:hover { color: var(--accent); }
.lab-related-kind { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.lab-foot { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
/* Diseño por nivel (punto 36): primaria grande y despejada; prepa densa y técnica. */
.lab-shell[data-level='primaria'] { font-size: 18px; }
.lab-shell[data-level='primaria'] .lab-activity-title { font-size: 30px; }
.lab-shell[data-level='primaria'] .lab-tab { font-size: 17px; padding: 12px 20px; }
.lab-shell[data-level='primaria'] .lab-comp { margin: var(--space-5) 0; }
/* Secundaria: ritmo de lectura estándar, pestañas compactas para explorar varias actividades. */
.lab-shell[data-level='secundaria'] .lab-tab { font-size: 14px; padding: 8px 14px; }
.lab-shell[data-level='secundaria'] .lab-comp { max-width: 860px; }
/* Preparatoria: denso y técnico, tipografía serif en títulos y pestañas apretadas. */
.lab-shell[data-level='preparatoria'] .lab-head h1 { font-family: ui-serif, Georgia, var(--font-reading); }
.lab-shell[data-level='preparatoria'] .lab-tab { font-size: 13px; padding: 6px 12px; }
.lab-shell[data-level='preparatoria'] .lab-activity-title { font-size: 22px; }
.lab-shell[data-level='preparatoria'] .lab-comp { max-width: 960px; }

/* ============ Componentes manipulativos de Primaria (kids.js) ============ */
/* Botonera táctil grande: dedos de 7 años, no cursores. */
.lab-pad { min-width: 56px; min-height: 56px; padding: 10px 18px; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 700 22px/1 inherit; cursor: pointer; touch-action: manipulation; }
.lab-pad:hover { border-color: var(--accent); color: var(--accent); }
.lab-pad:active { transform: translateY(1px); }
.lab-pad-ghost { background: transparent; color: var(--muted); font-weight: 600; }
.lab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.lab-kids-prompt { margin: 0 0 var(--space-3); font-size: 19px; font-weight: 600; }
.lab-kids-note { margin: var(--space-3) 0 0; min-height: 1.4em; color: var(--muted); font-size: 16px; }
.lab-kids-ok { color: var(--ok, #178a4c); font-weight: 700; }
.lab-kids-no { color: var(--warn, #b4441c); font-weight: 700; }
.lab-kids-stage { display: block; width: 100%; max-width: 640px; height: auto; margin: var(--space-3) auto; touch-action: manipulation; }
/* counter / number-line */
.lab-counter-read { margin: 0; min-width: 2ch; text-align: center; font: 800 40px/1 var(--font-reading); }
.lab-counter-dots { display: grid; gap: 6px; justify-items: center; margin: var(--space-3) 0; }
.lab-counter-line { display: flex; gap: 8px; }
.lab-counter-dot { font-size: 22px; color: var(--accent); }
.lab-nl-axis { stroke: var(--ink); stroke-width: 3; }
.lab-nl-tick { stroke: var(--muted); stroke-width: 2; }
.lab-nl-label { fill: var(--ink); font-size: 15px; }
.lab-nl-arc { stroke: var(--accent); stroke-width: 3; }
.lab-nl-arc-label { fill: var(--accent); font-size: 15px; font-weight: 700; }
.lab-nl-marker circle { fill: var(--accent); }
.lab-nl-marker-text { fill: var(--on-accent, #fff); font-size: 14px; font-weight: 800; }
/* fraction bars & circles */
.lab-fb-wrap { display: grid; gap: var(--space-4); }
.lab-fb-bar { display: flex; gap: 4px; }
.lab-fb-seg { flex: 1 1 0; min-height: 56px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font-size: 22px; cursor: pointer; }
.lab-fb-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.lab-fb-caption { margin: 6px 0 0; text-align: center; font: 700 22px/1 var(--font-reading); }
.lab-fc-wedge { fill: var(--surface); stroke: var(--ink); stroke-width: 2; cursor: pointer; }
.lab-fc-wedge:hover { fill: var(--accent-soft); }
.lab-fc-wedge.lab-fc-on { fill: #e8a13a; }
.lab-fc-on { fill: #e8a13a; }
/* una porción YA pintada no debe aclararse al pasar el cursor (el hover del .lab-fc-wedge
   genérico pisa el relleno); mantiene el color de «pintada» para que la cuenta visual coincida
   con el contador incluso bajo el puntero. */
.lab-fc-wedge.lab-fc-on:hover { fill: #d9922b; }
.lab-fc-plate { fill: none; stroke: var(--line); stroke-width: 4; }
/* La pizza (fraction-circle) se muestra más chica que el escenario genérico de kids (640px): basta con
   recortar el ancho del SVG, la geometría del viewBox no cambia y sigue centrada. */
.lab-fc-stage { max-width: 300px; }
/* clock */
.lab-clock-face { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.lab-clock-num { fill: var(--ink); font-size: 16px; font-weight: 700; }
.lab-clock-hour { stroke: var(--ink); stroke-width: 6; }
.lab-clock-minute { stroke: var(--accent); stroke-width: 4; }
.lab-clock-pin { fill: var(--ink); }
/* money */
.lab-money-bank { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.lab-money-denom { min-width: 64px; font-size: 18px; }
.lab-money-tray { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 40px; margin-bottom: var(--space-2); }
.lab-money-chip { padding: 8px 14px; border: 2px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 700 18px/1 inherit; cursor: pointer; }
/* balance-scale */
.lab-bs-beam line { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.lab-bs-chain { stroke: var(--muted); stroke-width: 2; }
.lab-bs-pan { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 3; }
.lab-bs-fulcrum { fill: var(--muted); }
.lab-bs-weight { fill: #7a5c2e; }
.lab-bs-weight-text { fill: #fff; font-size: 10px; font-weight: 700; }
.lab-bs-label { fill: var(--ink); font-size: 14px; font-weight: 700; }
.lab-bs-add { font-size: 18px; }
/* pattern-builder & drag-words & word-builder */
.lab-pb-sequence { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; }
.lab-pb-tile { min-width: 56px; font-size: 22px; }
.lab-pb-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 56px; padding: 6px 12px; border: 2px dashed var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--muted); font: 700 20px/1 inherit; cursor: pointer; }
.lab-pb-filled { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.lab-pb-word { min-width: auto; }
.lab-wb-built { margin: var(--space-3) 0; text-align: center; font: 800 40px/1.1 var(--font-reading); letter-spacing: 2px; color: var(--accent); }
/* grid-robot */
.lab-gr-board { display: grid; grid-template-columns: repeat(var(--gr-size, 5), 1fr); gap: 4px; max-width: 460px; margin: var(--space-3) auto; }
.lab-gr-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: clamp(18px, 5vw, 28px); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.lab-gr-rock { background: var(--bg); }
.lab-gr-robot { background: var(--accent-soft); border-color: var(--accent); }
/* thermometer */
.lab-th-tube { fill: var(--bg); stroke: var(--ink); stroke-width: 2; }
.lab-th-tick { stroke: var(--muted); stroke-width: 2; }
.lab-th-label { fill: var(--ink); font-size: 13px; }
/* side-by-side */
.lab-sbs-frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); max-width: 640px; margin: var(--space-3) auto; }
.lab-sbs-img { display: block; width: 100%; height: auto; }
.lab-sbs-after { position: absolute; inset: 0; }
.lab-sbs-divider { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: translateX(-50%); pointer-events: none; }
.lab-sbs-labels { display: flex; justify-content: space-between; max-width: 640px; margin: 0 auto; }
.lab-sbs-tag { font-size: 13px; color: var(--muted); }
.lab-sbs-slider { width: 100%; max-width: 640px; margin: var(--space-2) auto; }
/* shape-tangram */
.lab-st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.lab-st-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-3); border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.lab-st-card:hover { border-color: var(--accent); }
.lab-st-card svg { width: 90px; height: 90px; }
.lab-st-shape { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 3; }
.lab-st-name { font-weight: 700; text-transform: capitalize; }
/* simple-lever */
.lab-sl-beam line { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.lab-sl-fulcrum { fill: var(--muted); }
.lab-sl-load { fill: #7a5c2e; }
.lab-sl-load-text { fill: #fff; font-size: 15px; font-weight: 800; }
.lab-sl-force { fill: var(--accent); font-size: 15px; font-weight: 800; }
.lab-sl-label { fill: var(--muted); font-size: 12px; }
.lab-sl-arm { font-size: 18px; }

/* ============ world-builder: constructor de mundos 3D ============ */
.lab-wb { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.lab-wb-side { display: contents; } /* modo normal: sus hijos fluyen directo en el grid de .lab-wb */
.lab-wb-mandos { display: flex; flex-direction: column; gap: var(--space-2); }
.lab-wb-panel { display: flex; flex-direction: column; gap: var(--space-2); }
.lab-wb-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font: 800 20px/1.2 var(--font-reading); color: var(--ink); }
.lab-wb-tools, .lab-wb-materials, .lab-wb-actions, .lab-wb-extras { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.lab-wb-tool { padding: 8px 14px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 700 14px/1 inherit; cursor: pointer; }
.lab-wb-tool:hover { border-color: var(--accent); }
.lab-wb-tool.active { border-color: var(--accent); background: var(--accent); color: var(--on-accent, #fff); }
.lab-wb-thickness { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.lab-wb-range { width: 110px; accent-color: var(--accent); }
.lab-wb-mat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 600 13px/1 inherit; cursor: pointer; }
.lab-wb-mat:hover { border-color: var(--accent); }
.lab-wb-mat.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.lab-wb-chip { width: 20px; height: 20px; border-radius: 4px; background: var(--wb-swatch, var(--line)); border: 1px solid rgba(0 0 0 / .25); }
.lab-wb-stage { position: relative; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: #eef3f8; }
.lab-wb-canvas { display: block; width: 100%; height: 460px; touch-action: none; cursor: crosshair; }
.lab-wb-fs { flex: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255 255 255 / .88); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.lab-wb-fs:hover { border-color: var(--accent); background: #fff; }
/* Pantalla completa: se expande el widget ENTERO (.lab-wb), no sólo el lienzo: así herramientas,
   materiales, acciones y metas viajan con la escena. .lab-wb-side se parte en FILA de tres
   columnas: lienzo gigante (1fr) | mandos herramientas+materiales (240px) | panel de
   acciones/metas (300px, con su propio scroll si no cabe). Herramientas y piezas se apilan
   compactas (pills en flujo + rejilla de fichas) y todo queda visible sin scroll a ≥800px de
   alto; en pantallas estrechas (<900px) se apila en una columna con scroll. */
.lab-wb:fullscreen, .lab-wb.is-fs {
    margin: 0; background: var(--surface, #fff); color: var(--ink);
    position: relative; /* ancla del readout superpuesto sobre el lienzo */
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); overflow: auto;
}
.lab-wb:fullscreen .lab-wb-head, .lab-wb.is-fs .lab-wb-head { flex: none; font-size: 16px; }
.lab-wb:fullscreen .lab-wb-side, .lab-wb.is-fs .lab-wb-side {
    flex: 1 1 auto; min-height: 0;
    display: grid; gap: var(--space-2); align-items: stretch; align-content: stretch;
    grid-template-columns: minmax(0, 1fr) 240px 300px;
}
.lab-wb:fullscreen .lab-wb-stage, .lab-wb.is-fs .lab-wb-stage {
    grid-column: 1; position: relative; border: 0; border-radius: 0; min-height: 300px; min-width: 0;
}
.lab-wb:fullscreen .lab-wb-mandos, .lab-wb.is-fs .lab-wb-mandos { grid-column: 2; display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; overflow: auto; }
.lab-wb:fullscreen .lab-wb-tools, .lab-wb.is-fs .lab-wb-tools { flex: none; flex-direction: column; align-items: stretch; }
.lab-wb:fullscreen .lab-wb-tool, .lab-wb.is-fs .lab-wb-tool { text-align: center; }
.lab-wb:fullscreen .lab-wb-thickness, .lab-wb.is-fs .lab-wb-thickness { flex: 1 1 100%; }
.lab-wb:fullscreen .lab-wb-materials, .lab-wb.is-fs .lab-wb-materials { flex: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.lab-wb:fullscreen .lab-wb-mat, .lab-wb.is-fs .lab-wb-mat { justify-content: center; padding: 6px 4px; }
.lab-wb:fullscreen .lab-wb-mat-label, .lab-wb.is-fs .lab-wb-mat-label { display: none; } /* el título/aria-label sigue diciendo cuál es */
.lab-wb:fullscreen .lab-wb-panel, .lab-wb.is-fs .lab-wb-panel { grid-column: 3; display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; overflow: auto; }
.lab-wb:fullscreen .lab-wb-extras, .lab-wb.is-fs .lab-wb-extras { display: none; }
.lab-wb:fullscreen .lab-wb-canvas, .lab-wb.is-fs .lab-wb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.lab-wb:fullscreen .lab-wb-readout, .lab-wb.is-fs .lab-wb-readout {
    position: absolute; top: 60px; left: 12px; z-index: 2; margin: 0;
    display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; align-items: baseline;
    padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(16 24 32 / .72); color: #fff; font-size: 12px;
}
.lab-wb:fullscreen .lab-wb-readout dt, .lab-wb.is-fs .lab-wb-readout dt { color: rgba(255 255 255 / .75); font-weight: 600; }
.lab-wb:fullscreen .lab-wb-readout dd, .lab-wb.is-fs .lab-wb-readout dd { margin: 0; color: #fff; justify-self: end; }
.lab-wb:fullscreen .lab-wb-fs, .lab-wb.is-fs .lab-wb-fs { width: 42px; height: 42px; font-size: 20px; }
@media (max-width: 900px) {
    .lab-wb:fullscreen .lab-wb-side, .lab-wb.is-fs .lab-wb-side {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: max-content max-content max-content;
        align-content: start; align-items: start;
    }
    .lab-wb:fullscreen .lab-wb-stage, .lab-wb.is-fs .lab-wb-stage { grid-column: 1; grid-row: 1; min-height: 40vh; }
    /* el lienzo vuelve al flujo: el stage mide lo que mide el canvas (sin absolute que colapse la fila) */
    .lab-wb:fullscreen .lab-wb-canvas, .lab-wb.is-fs .lab-wb-canvas { position: relative; inset: auto; width: 100%; height: 40vh; min-height: 240px; }
    .lab-wb:fullscreen .lab-wb-mandos, .lab-wb.is-fs .lab-wb-mandos { grid-column: 1; grid-row: 2; overflow: visible; }
    .lab-wb:fullscreen .lab-wb-tools, .lab-wb.is-fs .lab-wb-tools { flex-direction: row; }
    .lab-wb:fullscreen .lab-wb-materials, .lab-wb.is-fs .lab-wb-materials { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
    .lab-wb:fullscreen .lab-wb-mat-label, .lab-wb.is-fs .lab-wb-mat-label { display: inline; }
    .lab-wb:fullscreen .lab-wb-mat, .lab-wb.is-fs .lab-wb-mat { justify-content: flex-start; padding: 6px 10px; }
    .lab-wb:fullscreen .lab-wb-panel, .lab-wb.is-fs .lab-wb-panel { grid-column: 1; grid-row: 3; overflow: visible; }
    .lab-wb:fullscreen .lab-wb-readout, .lab-wb.is-fs .lab-wb-readout { position: static; background: none; color: inherit; }
    .lab-wb:fullscreen .lab-wb-readout dt, .lab-wb.is-fs .lab-wb-readout dt { color: var(--muted); }
    .lab-wb:fullscreen .lab-wb-readout dd, .lab-wb.is-fs .lab-wb-readout dd { color: var(--ink); }
}
.lab-wb-hud { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: rgba(16 24 32 / .78); color: #fff; font-size: 13px; line-height: 1.35; pointer-events: none; }
.lab-wb-hud:empty { display: none; }
.lab-wb-file-label { font-size: 13px; color: var(--muted); }
.lab-wb-file { font-size: 13px; max-width: 220px; }
.lab-wb-readout { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); margin: 0; font-size: 14px; }
.lab-wb-readout dt { color: var(--muted); font-weight: 600; }
.lab-wb-readout dd { margin: 0; color: var(--ink); }
.lab-wb-goals { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); }
.lab-wb-goals-title { margin: 0 0 var(--space-2); font-weight: 800; color: var(--ink); }
.lab-wb-rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lab-wb-rules li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 14px; }
.lab-wb-rules li.ok .lab-wb-rule-mark { color: #1c9b57; }
.lab-wb-rules li.pending .lab-wb-rule-mark { color: var(--muted); }
.lab-wb-rule-mark { font-weight: 800; }
.lab-wb-rule-value { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============ Responsive ============ */
@media (max-width: 640px) {
    .labs-gallery .lab-filters { flex-direction: column; align-items: stretch; }
    .lab-band { margin-top: var(--space-5); }
    .lab-wb-canvas { height: 340px; }
    .lab-wb-tool { padding: 10px 12px; font-size: 13px; }
    .lab-wb-mat-label { display: none; }
    .lab-wb-readout { grid-template-columns: 1fr; }
}