/* F5: controles de diagramas (escala, lado de M) y «Valor en un punto» — PC y celular */
.dg-ctl { display: grid; gap: var(--e-2); }
.dg-ctl.compacto { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-bottom: var(--e-2); }
.dg-esc { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.2em; align-items: center; gap: var(--e-2); font-size: var(--t-sm); color: var(--texto-2); min-height: 44px; }
.dg-esc input[type="range"] { width: 100%; min-width: 0; height: 44px; margin: 0; accent-color: var(--primario); background: transparent; }
.dg-esc output { font: var(--peso-medio) var(--t-sm) var(--fuente-num, inherit); color: var(--texto); text-align: right; }
.dg-lado { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); font-size: var(--t-sm); color: var(--texto-2); flex-wrap: wrap; }
.dg-ctl.compacto .dg-lado { display: grid; gap: 2px; justify-items: end; }
.dg-ctl.compacto .dg-lado > span { font-size: var(--t-xs); }
.dg-lado .segmentado button { min-height: 44px; padding: 0 10px; }
.dg-ctl.compacto .dg-esc { grid-template-columns: minmax(0, 1fr) 2.8em; grid-template-rows: auto auto; row-gap: 0; }
.dg-ctl.compacto .dg-esc > span { grid-column: 1 / -1; font-size: var(--t-xs); }
.dg-punto { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e-2); }
.dg-punto label { display: grid; gap: 2px; flex: 1 1 5.5rem; min-width: 0; font-size: var(--t-xs); color: var(--texto-2); }
.dg-punto input { min-height: 44px; width: 100%; padding: 6px 10px; border: 1px solid var(--borde); border-radius: var(--r-md, 10px); background: var(--superficie); color: var(--texto); font: 16px var(--fuente-num, var(--fuente)); }
.dg-punto input:focus { outline: 2px solid var(--primario); outline-offset: 1px; }
.dg-punto .btn { min-height: 44px; flex: 1 1 7rem; }
.dg-punto-r { margin-top: var(--e-2); line-height: 1.5; font-variant-numeric: tabular-nums; }
.dg-punto-r b { color: var(--texto); }
.dg-tarjeta { padding: var(--e-3); margin-bottom: var(--e-3); }

/* interruptor (inercias distintas) */
.interruptor { position: relative; flex: none; width: 68px; height: 44px; min-height: 44px; border-radius: 999px; border: 1px solid var(--borde-fuerte, #b9c4d3); background: var(--superficie-hundida, #e8edf3); cursor: pointer; padding: 0; transition: background 160ms; }
.interruptor > span { position: absolute; top: 3px; left: 3px; width: 36px; height: 36px; border-radius: 50%; background: var(--superficie, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform 160ms; }
.interruptor[aria-checked="true"] { background: var(--primario); border-color: var(--primario); }
.interruptor[aria-checked="true"] > span { transform: translateX(24px); }
.interruptor:focus-visible { outline: 3px solid var(--primario-suave, #9cc7f2); outline-offset: 2px; }
/* leyenda de colores de las cargas */
.leyenda-cargas { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: var(--t-xs, 12px); color: var(--texto-2); }
.leyenda-cargas i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
#h-car [data-c="P"] svg { color: var(--c-puntual); } #h-car [data-c="W"] svg { color: var(--c-uniforme); } #h-car [data-c="M"] svg { color: var(--c-momento); }
#h-car button[aria-pressed="true"] svg { color: inherit; }
.pc-inv { padding: 4px 2px 8px; }
.pc-inv .fila-op { min-height: 40px; }