/* ============================================================================
   INBTEL RRHH · casillas.css   (aditivo · se carga después de main.css)
   Casillas, radios y calendario nativo que siguen el tema. main.css solo les da accent-color,
   así que sin marcar el navegador las pinta blancas también en oscuro.
   Aquí se dibujan con tokens: fondo, borde, marca y foco cambian con
   [data-theme]. Aplica a TODAS las páginas; no hay que tocar ningún HTML.
   ========================================================================== */
input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: none; appearance: none;
    margin: 0; flex-shrink: 0;
    width: 16px; height: 16px;
    display: inline-grid; place-content: center;
    background: var(--bg-primary);
    border: 1.5px solid var(--text-tertiary);          /* ≥ 3 : 1 contra el fondo en los dos temas */
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .12s ease, border-color .12s ease;
}
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) { border-color: var(--primary-color); }

input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate { background: var(--primary-color); border-color: var(--primary-color); }
input[type="checkbox"]:checked::before {
    content: ""; width: 9px; height: 5px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: translateY(-1px) rotate(-45deg);
}
input[type="checkbox"]:indeterminate::before { content: ""; width: 8px; height: 2px; border-radius: 1px; background: #fff; }

input[type="radio"]:checked { border-color: var(--primary-color); }
input[type="radio"]:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-color); }

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

input[type="checkbox"]:disabled,
input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }

/* táctil: la casilla crece, la fila ya mide 44 */
@media (pointer: coarse) {
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
    input[type="checkbox"]:checked::before { width: 11px; height: 6px; }
}

/* ---------- calendario y controles nativos siguen el tema ---------- */
html[data-theme="dark"], html:not([data-theme]) { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
html[data-theme="dark"] input::-webkit-calendar-picker-indicator,
html:not([data-theme]) input::-webkit-calendar-picker-indicator { filter: invert(1); }
input::-webkit-calendar-picker-indicator:hover { opacity: 1; }