/* ============================================================================
   Senha Interativa — Estilos para campos de senha com toggle, checklist e gerador
   Carregamento sob demanda: incluir apenas em páginas de manipulação de senha
   ============================================================================ */

/* --- Wrapper do campo de senha --- */
.senha-input-wrapper {
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 20px;
}

.senha-input-wrapper input[type="password"],
.senha-input-wrapper input[type="text"] {
	width: 100%;
	padding-right: 64px !important;
	margin-bottom: 0 !important;
}

/* --- Botões dentro do campo (olho e gerador) --- */
.senha-input-actions {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 4px;
	z-index: 3;
}

.senha-input-actions .btn-senha-action {
	background: none;
	border: none;
	padding: 4px 6px;
	cursor: pointer;
	color: #888;
	font-size: 14px;
	line-height: 1;
	outline: none;
	transition: color 0.2s ease;
}

.senha-input-actions .btn-senha-action:hover {
	color: #2a3f54;
}

.senha-input-actions .btn-senha-action:focus {
	outline: none;
	box-shadow: none;
}

/* --- Checklist de requisitos --- */
.senha-checklist {
	list-style: none;
	padding: 0;
	margin: -15px 0 20px 0; /* Puxa para cima compensando o margin do wrapper, e dá espaço abaixo */
	font-size: 12px;
	line-height: 1.8;
}

.senha-checklist li {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #999;
	transition: color 0.2s ease;
}

.senha-checklist li .senha-check-icon {
	font-size: 13px;
	width: 18px;
	text-align: center;
	transition: all 0.2s ease;
}

.senha-checklist li.senha-req-ok {
	color: #27ae60;
}

.senha-checklist li.senha-req-ok .senha-check-icon {
	color: #27ae60;
}

.senha-checklist li.senha-req-fail {
	color: #c0392b;
}

.senha-checklist li.senha-req-fail .senha-check-icon {
	color: #c0392b;
}

/* --- Animação suave de transição nos ícones --- */
.senha-checklist li .senha-check-icon {
	display: inline-block;
	transform: scale(1);
	transition: transform 0.15s ease, color 0.2s ease;
}

.senha-checklist li.senha-req-ok .senha-check-icon {
	transform: scale(1.15);
}

/* --- Ajustes para formulários padrão (.form-group) --- */
.form-group .senha-input-wrapper {
	margin-bottom: 0;
}

.form-group .senha-checklist {
	margin: 8px 0 0 0;
}

/* --- Ajustes para tela de login (estilo compacto) --- */
.login .senha-input-wrapper input[type="password"],
.login .senha-input-wrapper input[type="text"] {
	padding-right: 36px !important;
}

.login .senha-input-actions {
	right: 6px;
}