:root {
  --cpq-control-primary: #20284e;
  --cpq-control-primary-hover: #1a2141;
  --cpq-control-bg: #ffffff;
  --cpq-control-bg-hover: rgba(32, 40, 78, 0.08);
  --cpq-control-bg-disabled: #e9ecef;
  --cpq-control-border: rgba(32, 40, 78, 0.2);
  --cpq-control-border-muted: #d7e3ec;
  --cpq-control-text: #1f2937;
  --cpq-control-muted: #667085;
  --cpq-control-placeholder: #98a2b3;
  --cpq-control-focus: rgba(32, 40, 78, 0.14);
  --cpq-control-radius: clamp(6px, calc(5px + 0.16vw), 8px);
  --cpq-control-radius-sm: clamp(6px, calc(5px + 0.12vw), 7px);
  --cpq-control-height: clamp(34px, calc(32px + 0.4vw), 38px);
  --cpq-control-height-sm: clamp(29px, calc(27px + 0.3vw), 32px);
  --cpq-control-height-lg: clamp(38px, calc(35px + 0.5vw), 44px);
  --cpq-control-height-compact: clamp(32px, calc(30px + 0.28vw), 34px);
  --cpq-control-font-size: clamp(0.78rem, calc(0.74rem + 0.12vw), 0.875rem);
  --cpq-control-font-size-sm: clamp(0.72rem, calc(0.69rem + 0.1vw), 0.8rem);
  --cpq-button-height-sm: clamp(24px, calc(23px + 0.2vw), 27px);
  --cpq-button-font-size-sm: clamp(0.65rem, calc(0.63rem + 0.08vw), 0.72rem);
  --cpq-control-font-size-compact: clamp(0.7rem, calc(0.67rem + 0.08vw), 0.75rem);
  --cpq-control-label-size: clamp(0.68rem, calc(0.64rem + 0.1vw), 0.78rem);
  --cpq-control-padding-x: clamp(0.58rem, calc(0.48rem + 0.3vw), 0.75rem);
  --cpq-control-padding-y: clamp(0.3rem, calc(0.25rem + 0.1vw), 0.42rem);
  --cpq-button-padding-x: clamp(0.7rem, calc(0.55rem + 0.4vw), 1.25rem);
  --cpq-button-padding-y: clamp(0.38rem, calc(0.31rem + 0.14vw), 0.625rem);
  --cpq-button-padding-x-sm: clamp(0.42rem, calc(0.38rem + 0.14vw), 0.62rem);
  --cpq-button-padding-y-sm: clamp(0.16rem, calc(0.14rem + 0.05vw), 0.24rem);
  --cpq-button-font-weight: 400;
  --cpq-button-line-height: 1;
  --cpq-button-content-gap: 0.4rem;
}

.form-control:not(.form-control-color),
.form-select {
  min-height: var(--cpq-control-height);
  border-color: var(--cpq-control-border);
  border-radius: var(--cpq-control-radius);
  background-color: var(--cpq-control-bg);
  color: var(--cpq-control-text);
  font-size: var(--cpq-control-font-size);
  box-shadow: none;
  padding: var(--cpq-control-padding-y) var(--cpq-control-padding-x);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

textarea.form-control {
  min-height: clamp(62px, calc(58px + 1vw), 70px);
  resize: vertical;
}

.form-control-sm,
.form-select-sm {
  min-height: var(--cpq-control-height-sm);
  border-radius: var(--cpq-control-radius-sm);
  font-size: var(--cpq-control-font-size-sm);
}

.form-control-lg,
.form-select-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
  min-height: var(--cpq-control-height-lg);
  border-radius: 10px;
  font-size: clamp(0.9rem, calc(0.85rem + 0.16vw), 1rem);
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
  border-color: var(--cpq-control-border);
  background-color: var(--cpq-control-bg-hover);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--cpq-control-primary);
  background-color: var(--cpq-control-bg);
  box-shadow: 0 0 0 0.2rem var(--cpq-control-focus);
  color: var(--cpq-control-text);
}

.form-control:disabled,
.form-select:disabled {
  border-color: var(--cpq-control-border-muted);
  background-color: var(--cpq-control-bg-disabled);
  color: var(--cpq-control-muted);
  cursor: not-allowed;
  opacity: 0.85;
}

.form-control[readonly] {
  border-color: var(--cpq-control-border-muted);
  background-color: #f8fafc;
  color: var(--cpq-control-muted);
  opacity: 1;
}

.form-control::placeholder {
  color: var(--cpq-control-placeholder);
  opacity: 1;
}

.input-group-text {
  min-height: var(--cpq-control-height);
  border-color: var(--cpq-control-border);
  border-radius: var(--cpq-control-radius);
  background-color: var(--cpq-control-primary);
  color: #ffffff;
  font-size: var(--cpq-control-font-size);
  font-weight: 700;
  box-shadow: none;
  padding: var(--cpq-control-padding-y) var(--cpq-control-padding-x);
}

.input-group-text-cpq {
  border-color: var(--cpq-control-primary) !important;
  background-color: var(--cpq-control-primary) !important;
  color: #ffffff !important;
}

.input-group-text-cpq i {
  color: inherit !important;
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
  min-height: var(--cpq-control-height-sm);
  border-radius: var(--cpq-control-radius-sm);
  font-size: var(--cpq-control-font-size-sm);
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
  border-color: var(--cpq-control-border);
}

.form-label,
label.form-label,
.div-select > label {
  color: var(--cpq-control-muted);
  font-size: var(--cpq-control-label-size);
  font-weight: 700;
}

.btn:not(.btn-close),
.btn-editar,
.btn-delete,
.btn-modal {
  align-items: center;
  display: inline-flex;
  font-family: var(--cpq-font-family) !important;
  font-size: var(--cpq-control-font-size) !important;
  font-weight: var(--cpq-button-font-weight);
  gap: var(--cpq-button-content-gap);
  justify-content: center;
  line-height: var(--cpq-button-line-height);
  min-height: var(--cpq-control-height) !important;
  padding: var(--cpq-button-padding-y) var(--cpq-button-padding-x);
  text-align: center;
  vertical-align: middle;
}

.btn.btn-sm,
.btn-group-sm > .btn,
.btn-editar.btn-sm,
.btn-delete.btn-sm {
  font-size: var(--cpq-button-font-size-sm) !important;
  min-height: var(--cpq-button-height-sm) !important;
  padding: var(--cpq-button-padding-y-sm) var(--cpq-button-padding-x-sm) !important;
}

.btn-lg,
.btn-group-lg > .btn {
  min-height: var(--cpq-control-height-lg) !important;
}

.form-check-input {
  border-color: var(--cpq-control-border);
  box-shadow: none;
}

.form-check-input:focus {
  border-color: var(--cpq-control-primary);
  box-shadow: 0 0 0 0.2rem var(--cpq-control-focus);
}

.form-check-input:checked {
  border-color: var(--cpq-control-primary);
  background-color: var(--cpq-control-primary);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: var(--cpq-control-height);
  border-color: var(--cpq-control-border);
  border-radius: var(--cpq-control-radius);
  background-color: var(--cpq-control-bg);
  color: var(--cpq-control-text);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--cpq-control-primary);
  box-shadow: 0 0 0 0.2rem var(--cpq-control-focus);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--cpq-control-text);
  line-height: calc(var(--cpq-control-height) - 2px);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  min-height: var(--cpq-control-height);
}

.flatpickr-input.form-control {
  background-color: var(--cpq-control-bg);
}

.div-select .form-control {
  min-height: var(--cpq-control-height);
  border-color: var(--cpq-control-border);
  border-radius: var(--cpq-control-radius);
  background-color: var(--cpq-control-bg);
  color: var(--cpq-control-text);
  font-size: var(--cpq-control-font-size);
  padding: var(--cpq-control-padding-y) var(--cpq-control-padding-x);
}

.div-select .form-control:hover {
  border-color: var(--cpq-control-border);
  background-color: var(--cpq-control-bg-hover);
}

.div-select .form-control.select-open {
  border-color: var(--cpq-control-primary);
  background-color: var(--cpq-control-bg);
  box-shadow: 0 0 0 0.2rem var(--cpq-control-focus);
}