/* Casillas (checkbox) de toda la aplicación: cuadrado de 18px con el filo marino suave y, marcada,
   llena de marino con el visto blanco. Al pasar el ratón, un aro dorado; con el teclado, el azul.

   SÓLO CSS SOBRE LA MISMA CASILLA DEL NAVEGADOR (appearance: none): el clic, el teclado, la
   etiqueta, el «change» y el valor que se envía en el formulario no cambian, y no hay nada que
   arrancar por JS —vale también para los bloques que llegan por AJAX o desde un prototipo—.

   Incluye las de los formularios (.mws_checkbox): el plugin bootstrap-checkbox pone detrás de ellas
   unos botones rojo/verde, pero sdweb.css los esconde siempre (.button-checkbox{display:none}), así
   que la casilla que se ve y se pulsa en toda la aplicación es la nativa.

   Fuera, porque ya tienen su propio dibujo y éste se lo estropearía: las casillas del
   constructor de encuestas (.enc-chip, .enc-check), que son pastillas y casillas redondas con su
   propio relleno, y .checkbox-modern, que es un interruptor.

   Los colores van en tokens propios y no en --primario: ese se redefine en algunas secciones (en
   sdweb.css hay dos bloques que lo ponen gris) y la casilla cambiaría de color según la pantalla.

   Va en un fichero propio, cargado después de sdweb.css y cabeceiras.css, para poder comparar una
   pantalla con y sin él sólo quitando este <link>. */

:root {
    --casilla-mar: #2c3862;
    --casilla-borde: rgba(44, 56, 98, .45);
    --casilla-oro: rgba(222, 182, 74, .28);
    --casilla-foco: rgba(83, 119, 245, .30);
    --casilla-visto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --casilla-medias: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* El selector común. :not(:is(...) *) deja fuera cualquier casilla DENTRO de esos componentes. */
input[type="checkbox"]:not(:is(.enc-chip, .enc-check, .checkbox-modern) *) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: none;
    box-sizing: border-box;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    border: 1.5px solid var(--casilla-borde) !important;
    border-radius: 5px !important;
    outline: 0 !important;
    background: #fff center / 14px 14px no-repeat !important;
    box-shadow: none !important;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
/* sdweb.css encoge la marcada a 12px y le pone un aro: aquí mide lo mismo marcada o no. */
input[type="checkbox"]:not(:is(.enc-chip, .enc-check, .checkbox-modern) *):checked {
    border-color: var(--casilla-mar) !important;
    background-color: var(--casilla-mar) !important;
    background-image: var(--casilla-visto) !important;
}
/* «A medias» (indeterminate): la de «marcar todas» cuando sólo hay algunas. */
input[type="checkbox"]:not(:is(.enc-chip, .enc-check, .checkbox-modern) *):indeterminate {
    border-color: var(--casilla-mar) !important;
    background-color: var(--casilla-mar) !important;
    background-image: var(--casilla-medias) !important;
}
input[type="checkbox"]:not(:is(.enc-chip, .enc-check, .checkbox-modern) *):hover:not(:disabled) {
    border-color: var(--casilla-mar) !important;
    box-shadow: 0 0 0 3px var(--casilla-oro) !important;
}
input[type="checkbox"]:not(:is(.enc-chip, .enc-check, .checkbox-modern) *):focus-visible {
    box-shadow: 0 0 0 3px var(--casilla-foco) !important;
}
input[type="checkbox"]:not(:is(.enc-chip, .enc-check, .checkbox-modern) *):disabled {
    opacity: .55;
    background-color: #f1f2f6 !important;
    cursor: not-allowed;
}
input[type="checkbox"]:not(:is(.enc-chip, .enc-check, .checkbox-modern) *):checked:disabled {
    background-color: var(--casilla-mar) !important;
}

/* Los campos sí/no de los formularios del CRUD: sdweb.css mete la casilla en un recuadro de 16px
   con overflow oculto y, al marcarla, la posiciona en absoluto y la encoge a 12px. Con el cuadrado
   nuevo, el recuadro mide lo mismo que la casilla y ésta se queda en su sitio. */
label ~ div[class=""]:has(> input[type="checkbox"]) {
    width: 18px !important;
    height: 18px !important;
    overflow: visible !important;
}
label ~ div[class=""] > input[type="checkbox"],
label ~ div[class=""] > input[type="checkbox"]:checked {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
}