/* ReperFacil — Frente 07 — Controles de formularios no tema V1.00
   Somente apresentacao: nao altera valores, validacoes ou envio de formularios.
   As cores acompanham a paleta atual e o modo claro/escuro. */

:root {
    --rf-control-track: color-mix(in srgb, var(--color-border) 72%, var(--color-text) 28%);
    --rf-control-track-border: color-mix(in srgb, var(--color-border) 62%, var(--color-text) 38%);
    --rf-control-focus: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* Inputs nativos: preservamos aparencia e semantica de radio/checkbox.
   .btn-check e reservado aos cards de tema, botoes segmentados etc. */
input[type="radio"]:not(.btn-check),
input[type="checkbox"]:not(.btn-check),
input[type="range"] {
    accent-color: var(--color-accent) !important;
}

/* Bootstrap pinta o estado marcado de azul mesmo com accent-color.
   Corrigir apenas o preenchimento e a borda, preservando o desenho nativo. */
.form-check-input[type="checkbox"]:checked,
.form-check-input[type="radio"]:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

input[type="radio"]:not(.btn-check):focus-visible,
input[type="checkbox"]:not(.btn-check):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}
.form-check-input:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 .2rem var(--rf-control-focus) !important;
}

/* Selects: somente foco; nao altera largura, formato ou seta. */
select:focus-visible,
.form-select:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 .18rem var(--rf-control-focus) !important;
}

/* Sliders: trilha destacada, preenchimento dinamico e marcador visivel.
   Nao interfere na orientacao, limites, passos nem nos eventos de input. */
input[type="range"] {
    --rf-range-progress: 0%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 28px;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 9px;
    border-radius: 999px;
    border: 1px solid var(--rf-control-track-border);
    background: linear-gradient(to right,
        var(--color-accent) 0%,
        var(--color-accent) var(--rf-range-progress),
        var(--rf-control-track) var(--rf-range-progress),
        var(--rf-control-track) 100%);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -6.5px;
    border: 2px solid var(--color-bg-alt);
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 1px var(--rf-control-track-border), 0 1px 4px rgba(0,0,0,.18);
}
input[type="range"]::-moz-range-track {
    height: 9px;
    border-radius: 999px;
    border: 1px solid var(--rf-control-track-border);
    background: var(--rf-control-track);
}
input[type="range"]::-moz-range-progress {
    height: 9px;
    border-radius: 999px 0 0 999px;
    background: var(--color-accent);
}
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-bg-alt);
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 1px var(--rf-control-track-border), 0 1px 4px rgba(0,0,0,.18);
}
input[type="range"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 999px;
}
input[type="range"]:disabled {
    cursor: not-allowed;
    opacity: .52;
}
