/* Controle deslizante com valor editável (js/simulador/deslizante.js). Usado no Simulador Solar e na V4.
   Usa os tokens das duas páginas: --laranja, --tinta, --suave, --foco, --campo, --display.
   Régua com 44 px de altura (alvo de toque); a bolinha visível tem 28 px, com anel na cor do texto. */

.deslizante-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}

.deslizante .deslizante-cabeca label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

/* o valor: botão com cara de número; tocar abre a digitação */
.deslizante-valor {
  position: relative;
  z-index: 1; /* fica acima da régua, que sobe um pouco por baixo da linha */
  flex: none;
  min-height: 28px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px dashed var(--suave);
  border-radius: 4px 4px 0 0;
  background: none;
  color: var(--tinta);
  font: 700 19px/1.2 var(--display);
  white-space: nowrap;
  cursor: text;
  touch-action: manipulation;
}

.deslizante-valor:hover { border-bottom-color: var(--tinta); }
.deslizante-valor[hidden] { display: none; }

.deslizante .deslizante-cabeca .deslizante-digitar[type="text"] {
  position: relative;
  z-index: 1;
  flex: none;
  width: 7.5em;
  min-height: 28px;
  margin: 0;
  padding: 2px 8px;
  border: 1.5px solid var(--tinta);
  border-radius: 8px;
  background: var(--campo);
  color: var(--tinta);
  font: 700 18px/1.2 var(--display);
  text-align: right;
}

.deslizante .deslizante-cabeca .deslizante-digitar[hidden] { display: none; }

/* a régua: nativa, redesenhada; --fracao (0 a 1) vem do JS para pintar a parte preenchida */
.deslizante input[type="range"],
input[type="range"].deslizante-regua {
  --meia: 22px; /* metade da bolinha (área de toque de 44 px) */
  display: block;
  width: 100%;
  height: 44px;
  min-height: 0;
  margin: -8px 0 0; /* sobe por baixo da linha do rótulo: a área de toque continua com 44 px */
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: pan-y; /* arrasto vertical rola a página; só o horizontal move a régua */
}

.deslizante input[type="range"]:focus-visible,
input[type="range"].deslizante-regua:focus-visible { outline: none; }

.deslizante input[type="range"]::-webkit-slider-runnable-track,
input[type="range"].deslizante-regua::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--laranja) calc(var(--meia) + (100% - 2 * var(--meia)) * var(--fracao, 0)),
    var(--suave) 0);
}

.deslizante input[type="range"]::-moz-range-track,
input[type="range"].deslizante-regua::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    var(--laranja) calc(var(--meia) + (100% - 2 * var(--meia)) * var(--fracao, 0)),
    var(--suave) 0);
}

.deslizante input[type="range"]::-webkit-slider-thumb,
input[type="range"].deslizante-regua::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  margin-top: -19px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--laranja) 0 11px, var(--tinta) 11.5px 14px, transparent 14.5px);
}

.deslizante input[type="range"]::-moz-range-thumb,
input[type="range"].deslizante-regua::-moz-range-thumb {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--laranja) 0 11px, var(--tinta) 11.5px 14px, transparent 14.5px);
}

/* o texto logo abaixo encosta na régua: o vão já vem da área de toque da bolinha */
.deslizante input[type="range"] + * { margin-top: 0; }

/* foco do teclado: anel extra em volta da bolinha */
.deslizante input[type="range"]:focus-visible::-webkit-slider-thumb,
input[type="range"].deslizante-regua:focus-visible::-webkit-slider-thumb {
  background: radial-gradient(circle, var(--laranja) 0 11px, var(--tinta) 11.5px 14px, transparent 14.5px 16.5px, var(--foco) 17px 19.5px, transparent 20px);
}

.deslizante input[type="range"]:focus-visible::-moz-range-thumb,
input[type="range"].deslizante-regua:focus-visible::-moz-range-thumb {
  background: radial-gradient(circle, var(--laranja) 0 11px, var(--tinta) 11.5px 14px, transparent 14.5px 16.5px, var(--foco) 17px 19.5px, transparent 20px);
}

.deslizante input[type="range"][aria-invalid]:not([aria-invalid="false"])::-webkit-slider-runnable-track { box-shadow: 0 0 0 2px var(--erro); }
.deslizante input[type="range"][aria-invalid]:not([aria-invalid="false"])::-moz-range-track { box-shadow: 0 0 0 2px var(--erro); }

input[type="range"].deslizante-regua:disabled { cursor: default; opacity: 0.5; }