/*
 * Checkbox único de Sistema A3: caja con borde gris, esquinas redondeadas y relleno naranja con palomita blanca.
 * Cubre los checkbox nativos (form-check-input o sueltos), el custom-checkbox de Bootstrap 4 y ag-grid.
 * Se carga después de Bootstrap en base.html y base_vendofacil.html. El selector base va dentro de :where()
 * para no pisar los tamaños que definen los módulos (check-vivienda, crm-checkboxes-grid, vf-form-check-input).
 */
:root {
    --a3-check-color: var(--naranja, #ff6a1a);
    --a3-check-borde: #adb5bd;
    --a3-check-borde-foco: #ffb48a;
    --a3-check-fondo: #fff;
    --a3-check-foco: rgba(255, 106, 26, 0.25);
    --a3-check-activo: #ffd9c4;
    --a3-check-palomita: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
    --a3-check-guion: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

/* Modo oscuro de VendoFácil (el de A3 lo resuelve tema-oscuro.css) */
body.dark-mode {
    --a3-check-borde: #334155;
    --a3-check-fondo: #0f172a;
}

/* Nativos. Los switches de BS5 (.form-switch) y los inputs ocultos de BS4/ag-grid se dejan fuera */
:where(input[type="checkbox"]:not(.custom-control-input, .ag-checkbox-input, .form-switch *)) {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-bottom: 0;
    vertical-align: middle;
    border: 2px solid var(--a3-check-borde);
    border-radius: 0.3rem;
    background-color: var(--a3-check-fondo);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

/* Las propiedades de fondo se repiten aquí porque algunos módulos reinician `background` en todo input */
:where(input[type="checkbox"]:not(.custom-control-input, .ag-checkbox-input, .form-switch *)):checked,
:where(input[type="checkbox"]:not(.custom-control-input, .ag-checkbox-input, .form-switch *)):indeterminate {
    border-color: var(--a3-check-color);
    background-color: var(--a3-check-color);
    background-image: var(--a3-check-palomita);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 75% 75%;
}

:where(input[type="checkbox"]:not(.custom-control-input, .ag-checkbox-input, .form-switch *)):indeterminate {
    background-image: var(--a3-check-guion);
}

:where(input[type="checkbox"]:not(.custom-control-input, .ag-checkbox-input, .form-switch *)):focus {
    outline: none;
}

:where(input[type="checkbox"]:not(.custom-control-input, .ag-checkbox-input, .form-switch *)):focus-visible {
    box-shadow: 0 0 0 0.2rem var(--a3-check-foco);
}

:where(input[type="checkbox"]:not(.custom-control-input, .ag-checkbox-input, .form-switch *)):disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* .form-check-input: craft.css ya le da tamaño y forma, aquí solo se cambia su azul (#00A3FF) por el naranja */
.form-check-input[type="checkbox"]:checked,
.form-check-input[type="checkbox"]:indeterminate,
.form-check.form-check-solid .form-check-input[type="checkbox"]:checked {
    border-color: var(--a3-check-color);
    background-color: var(--a3-check-color);
}

.form-check-input[type="checkbox"]:focus-visible {
    border-color: var(--a3-check-color);
    box-shadow: 0 0 0 0.2rem var(--a3-check-foco);
}

/* custom-checkbox de Bootstrap 4 */
.custom-checkbox .custom-control-label::before {
    border-radius: 0.3rem;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: var(--a3-check-color);
    background-color: var(--a3-check-color);
}

.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem var(--a3-check-foco);
}

.custom-checkbox .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--a3-check-borde-foco);
}

.custom-checkbox .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    border-color: var(--a3-check-activo);
    background-color: var(--a3-check-activo);
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
    background-color: rgba(255, 106, 26, 0.5);
}

/* ag-grid: ag-theme-alpine.css se carga después y define las mismas variables en .ag-theme-alpine */
body .ag-theme-alpine {
    --ag-checkbox-checked-color: var(--a3-check-color);
    --ag-checkbox-indeterminate-color: var(--a3-check-color);
}