/* ═══════════════════════════════════════════════════════════
   pendulo.css — Ajustes puntuales exclusivos del péndulo
   Elemental W · simuladores/pendulo/
   (antes: simuladores/cinematica/pendulo/ — movido)

   Solo lo que NO cubre _compartido/simuladores-widgets.css
   (selector de gravedad, checkbox de vectores, lecturas en
   vivo, mini gráfica). Todo lo demás (chrome, sliders, mascota,
   overlay, línea de lecturas compactas) ya está resuelto por el
   CSS compartido — no se repite aquí.
═══════════════════════════════════════════════════════════ */

.pendulo-select-control {
  margin-bottom: 0;
}

.pendulo-select {
  width: 100%;
  height: 40px;
  padding: 0 var(--ew-space-3);

  font-family: var(--ew-font-body);
  font-size: var(--ew-text-sm);
  color: var(--ew-color-text);

  background: var(--ew-color-surface);
  border: 1px solid var(--ew-color-border);
  border-radius: var(--ew-radius-sm);

  cursor: pointer;
}

.pendulo-select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 28%, transparent);
  outline-offset: 2px;
}

.pendulo-check-control {
  display: flex;
  align-items: center;
  gap: var(--ew-space-2);
}

.pendulo-check-control input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--ew-color-primary);
  cursor: pointer;
}

.pendulo-check-control label {
  font-size: var(--ew-text-sm);
  color: var(--ew-color-text);
  cursor: pointer;
}

.pendulo-lecturas {
  display: flex;
  flex-direction: column;
  gap: var(--ew-space-2);

  padding: var(--ew-space-3);

  background: var(--ew-color-surface-soft);
  border-radius: var(--ew-radius-md);
}

.pendulo-grafica {
  width: 100%;
  height: 70px;

  background: var(--ew-color-surface-soft);
  border: 1px solid var(--ew-color-border);
  border-radius: var(--ew-radius-sm);
  overflow: hidden;
}

.pendulo-grafica svg {
  width: 100%;
  height: 100%;
  display: block;
}