/* Widgets interactivos (laboratorio virtual). */

.widget {
  background: color-mix(in srgb, var(--bg-deep) 45%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--spec-cyan) 22%, var(--border));
  border-radius: var(--radius-lg);
  padding: 18px 22px 16px;
  margin: 2em 0;
  font-family: var(--font-ui);
}

.widget-title h3 {
  margin: 2px 0 12px;
  font-size: 1.1em;
}

.widget-modes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.mode-btn {
  font-size: 0.85em;
  padding: 5px 14px;
  border-radius: 20px;
}

.mode-btn.active {
  background: color-mix(in srgb, var(--spec-cyan) 20%, var(--bg-raised));
  border-color: var(--spec-cyan);
}

.widget-board {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.piston-svg,
.pv-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- pistón ---------- */

.cyl-walls {
  fill: none;
  stroke: var(--ink-dim);
  stroke-width: 5;
  stroke-linejoin: round;
}

.cyl-base {
  fill: var(--ink-dim);
  opacity: 0.7;
}

.gas {
  opacity: 0.8;
  transition: fill 120ms linear;
}

.gas-particle {
  fill: rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: no-preference) {
  .gas-particle {
    animation: jiggle 1.1s ease-in-out infinite alternate;
  }
}

@keyframes jiggle {
  from { transform: translate(-1.5px, 1px); }
  to { transform: translate(1.5px, -1.2px); }
}

.piston-plate .plate {
  fill: #6b7688;
  stroke: var(--ink);
  stroke-width: 1;
}

.piston-plate .rod {
  fill: #4a5468;
}

.plate-grip {
  fill: var(--bg-deep);
  font-size: 11px;
  pointer-events: none;
}

.clamp {
  fill: var(--spec-amber);
}

/* ---------- diagrama P-V ---------- */

.pv-axes line {
  stroke: var(--ink-dim);
  stroke-width: 1;
}

.pv-axes .axis-line {
  stroke: var(--ink-dim);
  stroke-width: 1.4;
}

.pv-axes text {
  fill: var(--ink-dim);
  font-size: 11px;
  font-family: var(--font-mono);
}

.pv-axes .axis-label {
  font-size: 12.5px;
  fill: var(--ink);
}

.iso {
  fill: none;
  stroke: var(--locked);
  stroke-width: 1.1;
  opacity: 0.75;
}

.iso-label {
  fill: var(--ink-dim);
  font-size: 10px;
  font-family: var(--font-mono);
  opacity: 0.8;
}

.iso-current {
  fill: none;
  stroke: var(--spec-amber);
  stroke-width: 1.8;
  opacity: 0.9;
}

.trail {
  fill: none;
  stroke: var(--spec-cyan);
  stroke-width: 2.2;
  opacity: 0.5;
  stroke-linecap: round;
}

.marker-dot {
  fill: var(--spec-cyan);
}

.marker-halo {
  fill: none;
  stroke: color-mix(in srgb, var(--spec-cyan) 60%, transparent);
  stroke-width: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .marker-halo {
    animation: halo-pulse 2.2s var(--ease) infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
}

/* ---------- controles ---------- */

.widget-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 26px;
  margin-top: 14px;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.slider-row input[type="range"] {
  flex: 1;
  padding: 0;
  accent-color: var(--spec-cyan);
}

.slider-row input[type="range"]:disabled {
  accent-color: var(--locked);
  opacity: 0.4;
}

.slider-val {
  min-width: 74px;
  text-align: right;
  color: var(--spec-cyan);
}

.widget-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.widget-readout {
  font-size: 0.95em;
  color: var(--ink);
}

.small-btn {
  font-size: 0.8em;
  padding: 4px 12px;
}

.widget-hint {
  margin: 10px 0 0;
}

.widget-sliders.one-col {
  grid-template-columns: 1fr;
}

.widget-foot.column {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* van der Waals */

.ideal-curve {
  fill: none;
  stroke: var(--spec-cyan);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
  opacity: 0.8;
}

.crit-dot {
  fill: var(--spec-amber);
}

/* adiabática vs isoterma */

.curve-iso {
  fill: none;
  stroke: var(--spec-cyan);
  stroke-width: 2;
}

.curve-adi {
  fill: none;
  stroke: var(--spec-amber);
  stroke-width: 2;
}

.area-iso {
  fill: var(--spec-cyan);
  opacity: 0.08;
}

.area-adi {
  fill: var(--spec-amber);
  opacity: 0.1;
}

.dot-iso {
  fill: var(--spec-cyan);
}

.dot-adi {
  fill: var(--spec-amber);
}

/* cinética */

.half-line {
  stroke: var(--spec-amber);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
}

@media (max-width: 900px) {
  .widget-board {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
  }

  .widget-sliders {
    grid-template-columns: 1fr;
  }
}