/* Shared checkbox design from Pagos pendientes.html.
 * Keep the native input and sibling structure: forms, keyboard interaction,
 * dynamically rendered controls and existing checked-state selectors still work.
 * Important rules in this layer take precedence over page-specific legacy styles.
 */
@layer bullano-checkbox {
  :root {
    --checkbox-blue: #007aff;
    --checkbox-border: #8e8e93;
    --checkbox-ring: rgba(0, 122, 255, .45);
    --checkbox-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* Switches and controls with a separate visual label retain their semantics. */
  input[type="checkbox"]:where(:not([role="switch"]):not(.assist-toggle input):not(.resource-contract-toggle-group > input):not(.resource-contract-choice-grid input)),
  .resource-contract-choice-option > span:first-child:empty {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    flex: 0 0 26px !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    padding: 0 !important;
    border: 1.5px solid var(--checkbox-border) !important;
    border-radius: 50% !important;
    background: transparent center / 14px 14px no-repeat !important;
    box-shadow: none !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: background-color .15s, border-color .15s !important;
  }

  input[type="checkbox"]:checked,
  .resource-contract-choice-grid input:checked + .resource-contract-choice-option > span:first-child:empty {
    background-color: var(--checkbox-blue) !important;
    border-color: var(--checkbox-blue) !important;
    background-image: var(--checkbox-tick) !important;
  }

  /* Remove legacy CSS-drawn ticks so the SVG is the only mark. */
  input[type="checkbox"]::before,
  input[type="checkbox"]::after,
  .resource-contract-choice-option > span:first-child:empty::after {
    content: none !important;
  }

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

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

  input[type="checkbox"]:indeterminate {
    background-color: var(--checkbox-blue) !important;
    border-color: var(--checkbox-blue) !important;
    background-image: linear-gradient(white, white) !important;
    background-size: 12px 3px !important;
  }

  @media (prefers-reduced-motion: reduce) {
    input[type="checkbox"],
    .resource-contract-choice-option > span:first-child:empty {
      transition: none !important;
    }
  }

  @media (forced-colors: active) {
    input[type="checkbox"] {
      appearance: auto !important;
      -webkit-appearance: auto !important;
    }
  }
}