/* ═══════════════════════════════════════════════════════════
   caida-libre.css — Ajustes puntuales exclusivos de caída libre
   Elemental W · simuladores/caida-libre/

   Solo lo que NO cubre _compartido/simuladores-widgets.css
   (selector de gravedad, selector de objeto, checkbox de
   vectores, lecturas en vivo, foco del lienzo tocable en modo
   compacto). Todo lo demás (chrome, sliders, mascota, overlay,
   línea de lecturas compactas) ya está resuelto por el CSS
   compartido — no se repite aquí. Estructura idéntica a
   pendulo.css, con las clases renombradas a caida-libre-* (además
   hay un selector extra acá: objeto que cae, que péndulo no
   tiene).
═══════════════════════════════════════════════════════════ */

.caida-libre-select-control {
  margin-bottom: 0;
}

.caida-libre-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;
}

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

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

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

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

.caida-libre-control-sonido {
  /* display: flex; */
  display: none;
}

/* .caida-libre-boton-sonido {
  width: 100%;
  font-size: var(--ew-text-sm);
  min-height: 40px;
}

*/

.caida-libre-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);
}

/* Modo compacto: el lienzo es tocable/clickeable para volver a
   soltar el objeto (no tiene el botón "Soltar" de modo completo,
   ver widget-base.js y montarControlesBasicos en caida-libre.js). */
.simc-widget--caida-libre.simc-widget--modo-compacto .simc-widget__lienzo:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 28%, transparent);
  outline-offset: 2px;
}