/* Componentes do design system Certisign. */

@keyframes cs-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Button ---------- */
.cs-btn {
	--cs-btn-color: var(--cs-color-institucional-primary);
	--cs-btn-active: var(--cs-color-institucional-primary-hover);

	box-sizing: border-box;
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	min-height: 40px;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	color: inherit;
	font-family: var(--cs-font-family);
	font-size: var(--cs-font-size-text-label);
	font-weight: var(--cs-font-weight-semibold);
	line-height: var(--cs-font-line-text-label);
	letter-spacing: var(--cs-font-letter-text-label);
	transition:
		background var(--cs-transition-default),
		border-color var(--cs-transition-default),
		color var(--cs-transition-default);
}

.cs-btn:hover,
.cs-btn:focus,
.cs-btn:active {
	text-decoration: none;
}

.cs-btn--assinaturas {
	--cs-btn-color: var(--cs-color-assinaturas-verde-escuro);
	--cs-btn-active: var(--cs-color-assinaturas-verde-intenso);
}

.cs-btn--certificados {
	--cs-btn-color: var(--cs-color-certificados-purpura-escuro);
	--cs-btn-active: var(--cs-color-certificados-purpura-intenso);
}

.cs-btn--identificacao {
	--cs-btn-color: var(--cs-color-identificacao-laranja-escuro);
	--cs-btn-active: var(--cs-color-identificacao-laranja-intenso);
}

.cs-btn.cs-btn--primary {
	color: var(--cs-color-base-white);
	background: var(--cs-btn-color);
	border-color: var(--cs-btn-color);
}

.cs-btn.cs-btn--primary:hover,
.cs-btn.cs-btn--primary:active,
.cs-btn.cs-btn--primary.is-active {
	background: var(--cs-btn-active);
	border-color: var(--cs-btn-active);
}

.cs-btn.cs-btn--secondary {
	color: var(--cs-btn-color);
	background: transparent;
	border-color: var(--cs-btn-color);
}

.cs-btn.cs-btn--secondary:hover,
.cs-btn.cs-btn--secondary:active,
.cs-btn.cs-btn--secondary.is-active {
	background: var(--cs-color-base-grey-100);
	color: var(--cs-btn-color);
	border-color: var(--cs-btn-color);
}

.cs-btn.cs-btn--tertiary {
	color: var(--cs-btn-color);
	background: transparent;
	border-color: transparent;
}

.cs-btn.cs-btn--tertiary:hover,
.cs-btn.cs-btn--tertiary:active,
.cs-btn.cs-btn--tertiary.is-active {
	background: var(--cs-color-base-grey-100);
	color: var(--cs-btn-color);
}

.cs-btn--icon {
	width: 40px;
	height: 40px;
	min-height: 40px;
	padding: 0 8px;
}

.cs-btn--icon .cs-btn__icon {
	font-size: 24px;
}

.cs-btn--sm {
	min-height: 32px;
	padding: 0 16px;
}

.cs-btn--sm.cs-btn--icon {
	width: 32px;
	height: 32px;
	min-height: 32px;
	padding: 0;
}

.cs-btn--sm .cs-btn__icon {
	font-size: 20px;
}

.cs-btn__icon {
	flex: none;
	display: inline-block;
	color: inherit;
	font-family: var(--cs-font-family-icon);
	font-size: 16px;
	font-style: normal;
	font-weight: 200;
	line-height: 1;
	pointer-events: none;
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

/* Disabled: vem depois das paletas para vencer o hover. */
.cs-btn:is(:disabled, [disabled], .is-disabled, [aria-disabled="true"]),
.cs-btn.cs-btn--primary:is(:disabled, [disabled], .is-disabled, [aria-disabled="true"]) {
	cursor: not-allowed;
	pointer-events: none;
	color: var(--cs-color-base-white);
	background: var(--cs-color-base-grey-500);
	border-color: var(--cs-color-base-grey-500);
}

.cs-btn.cs-btn--secondary:is(:disabled, [disabled], .is-disabled, [aria-disabled="true"]) {
	color: var(--cs-color-base-grey-500);
	background: transparent;
	border-color: var(--cs-color-base-grey-500);
}

.cs-btn.cs-btn--tertiary:is(:disabled, [disabled], .is-disabled, [aria-disabled="true"]) {
	color: var(--cs-color-base-grey-500);
	background: transparent;
	border-color: transparent;
}

/* Desabilitado clicável: o clique chega ao JS. */
.cs-btn.cs-btn[aria-disabled="true"] {
	pointer-events: auto;
	cursor: pointer;
}

/* Loading: spinner no lugar do ícone; usar com [disabled] + aria-busy="true". */
.cs-btn--loading::before,
.cs-alert__spinner {
	box-sizing: border-box;
	display: inline-block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 2px solid currentcolor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: cs-spin 0.8s linear infinite;
}

.cs-btn--loading::before {
	content: "";
}

.cs-btn--loading .cs-btn__icon {
	display: none;
}

/* ---------- Input ---------- */
.cs-input {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	min-width: 140px;
}

.cs-input__label,
.cs-select__label {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--cs-color-base-grey-800);
	font-family: var(--cs-font-family);
	font-size: var(--cs-font-size-text-body);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-body);
	letter-spacing: var(--cs-font-letter-text-body);
}

.cs-input__label {
	width: 100%;
}

.cs-input__control {
	box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 8px;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.cs-input .cs-input__control > input.cs-input__field {
	box-sizing: border-box;
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 40px;
	max-height: 56px;
	margin: 0;
	padding: 4px 16px;
	background: var(--cs-color-bg-surface);
	border: 1px solid var(--cs-color-base-grey-400);
	border-radius: 4px;
	box-shadow: none;
	outline: 0;
	appearance: none;
	color: var(--cs-color-texto-primario);
	font-family: var(--cs-font-family);
	font-size: var(--cs-font-size-text-body);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-body);
	letter-spacing: var(--cs-font-letter-text-body);
	transition: border-color var(--cs-transition-default), background var(--cs-transition-default);
}

.cs-input .cs-input__control > input.cs-input__field::placeholder {
	color: var(--cs-color-texto-muted);
	opacity: 1;
}

.cs-input .cs-input__control > input.cs-input__field:hover,
.cs-input .cs-input__control > input.cs-input__field:not(:placeholder-shown) {
	border-color: var(--cs-color-base-grey-800);
}

.cs-input .cs-input__control > input.cs-input__field:focus,
.cs-input .cs-input__control > input.cs-input__field:active {
	border-color: var(--cs-color-institucional-primary);
	box-shadow: none;
}

.cs-input .cs-input__control > input.cs-input__field:focus-visible {
	outline: 2px solid var(--cs-color-institucional-primary);
	outline-offset: 2px;
}

.cs-input__icon {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--cs-color-base-grey-800);
	font-family: var(--cs-font-family-icon);
	font-size: 24px;
	line-height: 1;
}

.cs-input__support,
.cs-select__support {
	margin: 0;
	color: var(--cs-color-base-grey-800);
	font-family: var(--cs-font-family);
	font-size: var(--cs-font-size-text-body-small);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-body-small);
	letter-spacing: var(--cs-font-letter-text-body-small);
}

.cs-input__support {
	width: 100%;
}

/* Erro */
.cs-input--error,
.cs-input:has(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]) {
	padding-bottom: 20px;
}

.cs-input--error .cs-input__label,
.cs-input--error .cs-input__support,
.cs-input--error .cs-input__icon,
.cs-input:has(input[aria-invalid="true"]) .cs-input__label,
.cs-input:has(input[aria-invalid="true"]) .cs-input__support,
.cs-input:has(input[aria-invalid="true"]) .cs-input__icon {
	color: var(--cs-color-feedback-negativo);
}

.cs-input.cs-input--error .cs-input__control > input.cs-input__field,
.cs-input.cs-input--error .cs-input__control > input.cs-input__field:hover,
.cs-input.cs-input--error .cs-input__control > input.cs-input__field:focus,
.cs-input .cs-input__control > input.cs-input__field[aria-invalid="true"] {
	border-color: var(--cs-color-feedback-negativo);
}

/* Disabled */
.cs-input--disabled .cs-input__label,
.cs-input--disabled .cs-input__icon,
.cs-input--disabled .cs-input__support {
	color: var(--cs-color-base-grey-400);
}

.cs-input.cs-input--disabled .cs-input__control > input.cs-input__field,
.cs-input.cs-input--disabled .cs-input__control > input.cs-input__field:hover,
.cs-input.cs-input--disabled .cs-input__control > input.cs-input__field:focus,
.cs-input .cs-input__field:disabled {
	border-color: var(--cs-color-base-grey-400);
	color: var(--cs-color-base-grey-500);
	cursor: not-allowed;
}

.cs-input--disabled .cs-input__field::placeholder {
	color: var(--cs-color-base-grey-500);
}

.cs-input.cs-input--disabled-text .cs-input__control > input.cs-input__field {
	background: var(--cs-color-base-grey-200);
	border-color: var(--cs-color-base-grey-400);
	color: var(--cs-color-texto-muted);
}

.cs-input--disabled-text .cs-input__label,
.cs-input--disabled-text .cs-input__support {
	color: var(--cs-color-base-grey-400);
}

/* ---------- Select ---------- */
.cs-select {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: 100%;
	min-width: 140px;
}

.cs-select__control {
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.cs-select__control::after {
	content: "keyboard_arrow_down";
	position: absolute;
	right: 16px;
	color: var(--cs-color-base-grey-800);
	font-family: var(--cs-font-family-icon);
	font-size: 16px;
	line-height: 1;
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	pointer-events: none;
}

.cs-select__icon {
	position: absolute;
	left: 16px;
	color: var(--cs-color-base-grey-800);
	font-family: var(--cs-font-family-icon);
	font-size: 16px;
	line-height: 1;
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	pointer-events: none;
}

.cs-select__field {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 4px 40px 4px 16px;
	background: var(--cs-color-bg-surface);
	border: 1px solid var(--cs-color-base-grey-400);
	border-radius: 4px;
	box-shadow: none;
	outline: 0;
	appearance: none;
	cursor: pointer;
	color: var(--cs-color-texto-primario);
	font-family: var(--cs-font-family);
	font-size: var(--cs-font-size-text-body);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-body);
	letter-spacing: var(--cs-font-letter-text-body);
	transition: border-color var(--cs-transition-default);
}

.cs-select__field:hover,
.cs-select__field:has(option:checked:not([value=""])) {
	border-color: var(--cs-color-base-grey-800);
}

.cs-select__field:focus-visible {
	border-color: var(--cs-color-institucional-primary);
	outline: 2px solid var(--cs-color-institucional-primary);
	outline-offset: 2px;
}

.cs-select__field:has(option[value=""]:checked) {
	color: var(--cs-color-texto-muted);
}

.cs-select__icon ~ .cs-select__field {
	padding-left: 40px;
}

.cs-select--floating {
	position: relative;
	gap: 0;
}

.cs-select--floating .cs-select__label {
	position: absolute;
	z-index: 1;
	top: -8px;
	left: 12px;
	padding: 0 4px;
	background: var(--cs-color-bg-surface);
	border-radius: 2px;
	font-size: var(--cs-font-size-text-body-small);
	line-height: var(--cs-font-line-text-body-small);
	letter-spacing: var(--cs-font-letter-text-body-small);
}

.cs-select--floating .cs-select__support {
	padding: 4px 16px 0;
}

.cs-select--error,
.cs-select:has(select[aria-invalid="true"]) {
	padding-bottom: 20px;
}

.cs-select--error .cs-select__label,
.cs-select--error .cs-select__support,
.cs-select--error .cs-select__icon {
	color: var(--cs-color-feedback-negativo);
}

.cs-select.cs-select--error .cs-select__field,
.cs-select.cs-select--error .cs-select__field:hover,
.cs-select.cs-select--error .cs-select__field:focus-visible,
.cs-select .cs-select__field[aria-invalid="true"] {
	border-color: var(--cs-color-feedback-negativo);
}

.cs-select.cs-select--error .cs-select__field:has(option[value=""]:checked) {
	color: var(--cs-color-feedback-negativo);
}

.cs-select--disabled .cs-select__label,
.cs-select--disabled .cs-select__support,
.cs-select--disabled .cs-select__icon,
.cs-select--disabled .cs-select__control::after,
.cs-select:has(.cs-select__field:disabled) .cs-select__label,
.cs-select:has(.cs-select__field:disabled) .cs-select__support,
.cs-select:has(.cs-select__field:disabled) .cs-select__icon,
.cs-select:has(.cs-select__field:disabled) .cs-select__control::after {
	color: var(--cs-color-base-grey-400);
}

.cs-select.cs-select--disabled .cs-select__field,
.cs-select .cs-select__field:disabled {
	border-color: var(--cs-color-base-grey-400);
	color: var(--cs-color-base-grey-500);
	cursor: not-allowed;
}

.cs-select--disabled-text .cs-select__field {
	background: var(--cs-color-base-grey-200);
	color: var(--cs-color-texto-muted);
}

/* ---------- Radio ---------- */
.cs-radio {
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: var(--cs-space-2);
	margin: 0;
	cursor: pointer;
}

.cs-radio input.cs-radio__input {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid var(--cs-color-base-grey-800);
	border-radius: 50%;
	background: var(--cs-color-bg-surface);
	appearance: none;
	cursor: pointer;
	transition: border-color var(--cs-transition-default), background var(--cs-transition-default);
}

.cs-radio input.cs-radio__input:checked {
	border-color: var(--cs-color-institucional-primary);
	background: var(--cs-color-institucional-primary);
	box-shadow: inset 0 0 0 3px var(--cs-color-bg-surface);
}

.cs-radio input.cs-radio__input:focus-visible {
	outline: 2px solid var(--cs-color-institucional-primary);
	outline-offset: 2px;
}

.cs-radio input.cs-radio__input:disabled {
	border-color: var(--cs-color-base-grey-400);
	cursor: not-allowed;
}

.cs-radio__label,
.cs-checkbox__label {
	color: var(--cs-color-texto-primario);
	font-family: var(--cs-font-family);
	font-size: var(--cs-font-size-text-body);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-body);
	letter-spacing: var(--cs-font-letter-text-body);
}

.cs-radio--card {
	min-width: 154px;
	min-height: 52px;
	padding: var(--cs-space-4);
	background: var(--cs-color-bg-surface);
	border: 1px solid var(--cs-color-border-light);
	border-radius: 8px;
	transition: background var(--cs-transition-default), border-color var(--cs-transition-default);
}

.cs-radio--card input.cs-radio__input {
	width: 16px;
	height: 16px;
	border-width: 1.5px;
}

.cs-radio--card:has(.cs-radio__input:checked) {
	background: var(--cs-color-institucional-gelo);
	border-color: var(--cs-color-institucional-gelo);
}

/* ---------- Checkbox ---------- */
.cs-checkbox {
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--cs-space-2);
	margin: 0;
	cursor: pointer;
}

.cs-checkbox input.cs-checkbox__input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--cs-color-institucional-primary);
	cursor: pointer;
}

/* ---------- Alert ---------- */
.cs-alert {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--cs-space-2);
	width: 100%;
	padding: var(--cs-space-3) var(--cs-space-4);
	background: var(--cs-color-base-grey-100);
	border-radius: 8px;
	color: var(--cs-color-texto-primario);
}

.cs-alert__icon {
	flex: 0 0 auto;
	display: inline-block;
	color: inherit;
	font-family: var(--cs-font-family-icon);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

.cs-alert__spinner {
	margin: 2px;
	color: var(--cs-color-institucional-primary);
}

.cs-alert__content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cs-alert__title {
	color: inherit;
	font-size: var(--cs-font-size-text-body);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-body);
	letter-spacing: var(--cs-font-letter-text-body);
}

.cs-alert__text {
	color: var(--cs-color-texto-muted);
	font-size: var(--cs-font-size-text-body-small);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-body-small);
	letter-spacing: var(--cs-font-letter-text-body-small);
}

.cs-alert--positivo { color: var(--cs-color-feedback-positivo); }
.cs-alert--negativo { color: var(--cs-color-feedback-negativo); }
.cs-alert--info { color: var(--cs-color-institucional-primary); }

.cs-alert--info .cs-alert__text {
	color: var(--cs-color-texto-primario);
	font-size: var(--cs-font-size-text-body);
	line-height: var(--cs-font-line-text-body);
	letter-spacing: var(--cs-font-letter-text-body);
}

.cs-alert--loading { align-items: center; }

.cs-alert--plain {
	padding: 0;
	background: transparent;
}

/* ---------- Tag ---------- */
.cs-tag {
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 4px;
	padding: 4px 6px;
	min-height: 24px;
	height: 24px;
	border-radius: 30px;
	white-space: nowrap;
	color: var(--cs-color-texto-primario);
	font-family: var(--cs-font-family);
	font-size: var(--cs-font-size-text-body-small);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-body-small);
	letter-spacing: var(--cs-font-letter-text-body-small);
}

.cs-tag__icon {
	flex: 0 0 auto;
	display: inline-block;
	color: inherit;
	font-family: var(--cs-font-family-icon);
	font-size: 16px;
	font-style: normal;
	font-weight: 200;
	line-height: 1;
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

.cs-tag--alerta {
	color: var(--cs-color-feedback-alerta);
	background: var(--cs-color-feedback-alerta-suave);
}

.cs-tag--positivo {
	color: var(--cs-color-feedback-positivo);
	background: var(--cs-color-feedback-positivo-suave);
}

.cs-tag--brand {
	color: var(--cs-color-certificados-purpura-escuro);
	background: var(--cs-color-certificados-purpura-suave);
}