/* Laboratorio interactivo (simulaciones p5.js) */
.me-lab__grid {
  display: grid; gap: var(--me-space-gap);
  align-items: start;
}
.me-lab__lienzo {
  position: relative; min-width: 0; overflow: hidden;
  padding: clamp(.75rem, 1.6vw, 1.25rem);
  border-radius: var(--me-radius-lg);
  background: var(--me-color-blanco);
  border: 1px solid var(--me-color-border);
  border-top: 6px solid var(--me-ui-azul);
}
.me-section--gris .me-lab__lienzo { border-color: transparent; border-top-color: var(--me-ui-azul); }
.me-lab__lienzo canvas { display: block; max-width: 100%; height: auto !important; } /* p5 fija el alto en línea; !important para que no se deforme al achicar */

.me-lab__panel {
  display: grid; gap: 1.25rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: var(--me-radius-lg);
  background: var(--me-color-bg-alt);
}
.me-section--gris .me-lab__panel { background: var(--me-color-blanco); }

.me-lab__controles { display: grid; gap: 1.1rem; }
.me-lab__controles [data-lab-grupo] { display: grid; gap: 1.1rem; }
.me-lab__controles [hidden] { display: none; }
.me-lab__campo { display: grid; gap: .45rem; }
.me-lab__label {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
  font-size: var(--me-fs-small); font-weight: var(--me-fw-semibold); color: var(--me-color-text);
}
.me-lab__valor {
  flex: none; min-width: 3.5rem; padding: .15rem .55rem;
  border-radius: var(--me-radius-pill); background: var(--me-ui-azul-suave);
  text-align: center; font-variant-numeric: tabular-nums; color: var(--me-ui-azul-tinta);
}

/* Slider */
.me-lab__range {
  width: 100%; height: 28px; margin: 0;
  background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  accent-color: var(--me-ui-azul-tinta);
}
.me-lab__range::-webkit-slider-runnable-track { height: 6px; border-radius: var(--me-radius-pill); background: var(--me-color-border-strong); }
.me-lab__range::-moz-range-track { height: 6px; border-radius: var(--me-radius-pill); background: var(--me-color-border-strong); }
.me-lab__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px;
  border: 3px solid var(--me-color-blanco); border-radius: 50%;
  background: var(--me-ui-azul-tinta); box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.me-lab__range::-moz-range-thumb {
  width: 16px; height: 16px;
  border: 3px solid var(--me-color-blanco); border-radius: 50%;
  background: var(--me-ui-azul-tinta); box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.me-lab__range:focus-visible { outline: 3px solid var(--me-color-focus); outline-offset: 2px; border-radius: var(--me-radius-sm); }

/* Chips (gravedad, modo) */
.me-lab__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.me-lab__chips--4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 2×2 en móvil */
@media (min-width: 480px) { .me-lab__chips--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.me-lab__chip {
  display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
  min-height: 44px; padding: .45rem .7rem;
  border: 1.5px solid var(--me-color-border-strong); border-radius: var(--me-radius-sm);
  background: var(--me-color-blanco); color: var(--me-color-text);
  font: var(--me-fw-semibold) var(--me-fs-small)/1.2 var(--me-font-body);
  cursor: pointer; transition: border-color var(--me-dur), background var(--me-dur);
}
.me-lab__chip small { font-weight: var(--me-fw-regular); font-size: .75rem; color: var(--me-color-muted); }
.me-lab__chip:hover { border-color: var(--me-color-negro); }
.me-lab__chip[aria-checked="true"] { border-color: var(--me-ui-azul-tinta); background: var(--me-ui-azul-suave); color: var(--me-ui-azul-tinta); }
.me-lab__chip:focus-visible { outline: 3px solid var(--me-color-focus); outline-offset: 2px; }

.me-lab__btns { gap: .5rem; }

/* Resultados */
.me-lab__datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .6rem;
  margin: 0;
}
.me-lab__dato {
  padding: .7rem .85rem;
  border-radius: var(--me-radius-sm); background: var(--me-color-blanco);
  border-left: 4px solid var(--me-acc, var(--me-ui-naranja));
}
.me-section--gris .me-lab__dato { background: var(--me-color-bg-alt); }
.me-lab__dato:nth-child(2) { --me-acc: var(--me-ui-verde); }
.me-lab__dato:nth-child(3) { --me-acc: var(--me-ui-amarillo); }
.me-lab__dato dt { font-size: .75rem; color: var(--me-color-muted); }
.me-lab__dato dd {
  margin: .15rem 0 0;
  font-family: var(--me-font-heading); font-weight: var(--me-fw-bold); font-size: 1.25rem;
  font-variant-numeric: tabular-nums; color: var(--me-color-text);
}
.me-lab__dato dd sup { font-size: .6em; }

.me-lab__nota { margin: 0; font-size: .9375rem; color: var(--me-color-muted); }
.me-lab__cta { margin-top: .25rem; }

@media (min-width: 1025px) {
  .me-lab__grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .me-lab__grid--invertido .me-lab__lienzo { order: 2; }
}

/* Aviso del widget desactivado (solo en el editor de Elementor) */
.me-lab__apagado {
  margin: 1rem var(--me-gutter); padding: 1rem 1.25rem;
  border: 2px dashed var(--me-color-border-strong); border-radius: var(--me-radius);
  background: var(--me-color-bg-alt); color: var(--me-color-muted);
  font-size: var(--me-fs-small);
}

/* Sobre fondo negro */
.me-section--negro .me-lab__lienzo { border-color: transparent; }
.me-section--negro .me-lab__panel { background: rgba(255, 255, 255, .06); }
.me-section--negro .me-lab__label { color: var(--me-color-blanco); }
.me-section--negro .me-lab__nota { color: rgba(255, 255, 255, .72); }