/* ADICIÓN FUNCIONAL #4 — foco visible en los sliders de la calculadora.
 *
 * Los cuatro `input[type=range]` traen `outline: none` del export y ninguna otra señal de
 * foco: el recorrido con Tab pasaba por ellos sin que se viera nada. La calculadora es la
 * pieza que convence y hoy es inoperable a ciegas con teclado. WCAG 2.4.7 (Focus Visible), AA.
 *
 * El anillo NO se inventa: es el mismo que el sistema ya usa en los inputs de texto del
 * formulario (`border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-surface)`),
 * aplicado al pulgar del slider, que es la parte que se mueve.
 *
 * `:focus-visible` y no `:focus`: así el anillo aparece con teclado y no al arrastrar con el
 * mouse o el dedo, que es cuando estorbaría.
 *
 * En reposo no cambia un solo píxel — lo demuestra el juez seccional.
 */

input[type="range"].upran-riel:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--brand-surface), 0 0 0 4.5px var(--brand);
}

input[type="range"].upran-riel:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px var(--brand-surface), 0 0 0 4.5px var(--brand);
}

/* Respaldo para navegadores que no soportan :focus-visible en pseudo-elementos del slider:
 * el anillo va sobre el control entero. Nunca en :focus a secas, para no ensuciar el arrastre. */
@supports not selector(input[type="range"]:focus-visible::-webkit-slider-thumb) {
  input[type="range"].upran-riel:focus-visible {
    outline: 2px solid var(--brand) !important;
    outline-offset: 2px;
    border-radius: 6px;
  }
}