/* Tela de login do Portal do Responsável - mesmo visual do Portal do Professor.
   Fundo estático (só gradientes CSS), sem canvas/animação contínua. */
:root {
	--c-primary: #4f46e5;
	--c-primary-2: #3b82f6;
	--c-primary-soft: #eef0ff;
	--c-text: #1e293b;
	--c-muted: #64748b;
	--c-border: #e2e8f0;
}
html, body { height: 100%; }
body {
	margin: 0;
	padding: 24px 16px;
	font-family: 'Inter', 'Roboto', Calibri, Arial, sans-serif;
	font-size: 14px;
	color: var(--c-text);
	-webkit-font-smoothing: antialiased;
	background:
		radial-gradient(1200px 600px at 10% -10%, #e0e7ff 0%, rgba(224,231,255,0) 60%),
		radial-gradient(900px 500px at 110% 110%, #dbeafe 0%, rgba(219,234,254,0) 60%),
		#f5f7fb;
	background-attachment: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	box-sizing: border-box;
}
.login-wrap { width: 100%; max-width: 400px; }

.login-card {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -12px rgba(15,23,42,.18);
	padding: 32px 30px 26px;
	animation: entrar .35s ease-out both;
}
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .login-card { animation: none; } }

.login-head { text-align: center; margin-bottom: 24px; }
.login-logo {
	width: 56px; height: 56px;
	margin: 0 auto 14px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 28px;
	background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
	box-shadow: 0 8px 18px -6px rgba(79,70,229,.5);
}
.login-escola { display: block; max-width: 100%; height: auto; margin: 0 auto 14px; }
.login-head h1 { font-size: 21px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; color: var(--c-text); }
.login-head p { margin: 0; color: var(--c-muted); font-size: 13.5px; }

/* identificação do responsável (nome + CPF) nas etapas seguintes */
.login-quem {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	margin-bottom: 18px;
	border: 1px solid var(--c-border);
	border-radius: 12px;
	background: var(--c-primary-soft);
}
.login-quem .avatar {
	flex: 0 0 36px;
	width: 36px; height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 17px;
	background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
}
.login-quem .dados { min-width: 0; line-height: 1.3; }
.login-quem strong { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-quem span { color: var(--c-muted); font-size: 12.5px; }
.login-quem a { margin-left: auto; color: var(--c-muted); font-size: 16px; }
.login-quem a:hover { color: var(--c-primary); }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: #334155; }
.field .dica { display: block; margin-top: 6px; color: var(--c-muted); font-size: 12px; }
.input-ico { position: relative; }
.input-ico > .bi {
	position: absolute;
	left: 14px; top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	font-size: 16px;
	pointer-events: none;
	z-index: 3;
}
.input-ico .form-control {
	height: 46px;
	padding-left: 42px;
	border: 1px solid var(--c-border);
	border-radius: 10px;
	box-shadow: none;
	font-size: 15px;
	transition: border-color .15s, box-shadow .15s;
}
.input-ico .form-control:focus {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 4px rgba(79,70,229,.12);
}
.input-ico.has-btn .form-control { padding-right: 46px; }
.ver-senha {
	position: absolute;
	right: 4px; top: 50%;
	transform: translateY(-50%);
	width: 38px; height: 38px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #94a3b8;
	font-size: 17px;
	z-index: 3;
}
.ver-senha:hover { color: var(--c-text); background: #f1f5f9; }
.has-error .form-control { border-color: #ef4444; }
.has-error .form-control:focus { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.12); }
.codigo-confirmacao { text-align: center; letter-spacing: .4em; font-size: 20px !important; font-weight: 600; }

/* força da senha */
.forca { margin: -6px 0 16px; }
.forca .barra { height: 6px; border-radius: 6px; background: var(--c-border); overflow: hidden; }
.forca .barra i { display: block; height: 100%; border-radius: 6px; transition: width .2s; }
.forca small { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; }

.btn-entrar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 46px;
	margin-top: 6px;
	border: 0;
	border-radius: 10px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	background: linear-gradient(135deg, var(--c-primary) 0%, #5b5bf0 100%);
	box-shadow: 0 6px 14px -6px rgba(79,70,229,.6);
	transition: filter .15s, transform .05s;
}
.btn-entrar:hover { filter: brightness(1.06); }
.btn-entrar:active { transform: translateY(1px); }
.btn-entrar[disabled] { opacity: .7; cursor: wait; }

.login-esqueci { text-align: center; margin-top: 16px; font-size: 13.5px; }
.login-esqueci a, .login-links a { color: var(--c-primary); font-weight: 500; }

.alerta {
	position: relative;
	margin-top: 18px;
	padding: 12px 36px 12px 14px;
	border-radius: 10px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	font-size: 13.5px;
	line-height: 1.5;
}
.alerta.ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.alerta .close { position: absolute; top: 8px; right: 12px; font-size: 18px; }

.login-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 16px;
	margin-top: 20px;
	font-size: 12.5px;
}
.login-links a { color: var(--c-muted); }
.login-links a:hover { color: var(--c-primary); text-decoration: none; }
.login-rodape { text-align: center; color: #94a3b8; font-size: 11.5px; margin-top: 14px; }

.spinner {
	width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,.45);
	border-top-color: #fff;
	border-radius: 50%;
	display: inline-block;
	animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

@media (max-width: 420px) {
	.login-card { padding: 26px 20px 22px; border-radius: 16px; }
}

/* botão de tema */
.tema-btn {
	position: fixed;
	top: 16px; right: 16px;
	width: 40px; height: 40px;
	border: 1px solid var(--c-border);
	border-radius: 10px;
	background: rgba(255,255,255,.8);
	color: var(--c-muted);
	font-size: 17px;
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 10;
}
.tema-btn:hover { color: var(--c-text); }
.tema-btn .bi-sun { display: none; }

/* tema escuro */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body {
	--c-primary: #818cf8;
	--c-primary-soft: #16203a;
	--c-text: #e2e8f0;
	--c-muted: #94a3b8;
	--c-border: #243045;
	background:
		radial-gradient(1200px 600px at 10% -10%, rgba(79,70,229,.18) 0%, rgba(79,70,229,0) 60%),
		radial-gradient(900px 500px at 110% 110%, rgba(59,130,246,.14) 0%, rgba(59,130,246,0) 60%),
		#0b1120;
}
html[data-theme="dark"] .login-card { background: #111a2e; box-shadow: 0 12px 40px -12px rgba(0,0,0,.6); }
html[data-theme="dark"] .login-escola { background: #fff; padding: 8px 12px; border-radius: 12px; }
html[data-theme="dark"] .field label { color: #cbd5e1; }
html[data-theme="dark"] .input-ico .form-control { background: #0e1628; color: var(--c-text); }
html[data-theme="dark"] .input-ico .form-control:focus { box-shadow: 0 0 0 4px rgba(129,140,248,.18); }
html[data-theme="dark"] .ver-senha:hover { background: #1a2540; }
html[data-theme="dark"] .btn-entrar { background: linear-gradient(135deg, #4f46e5 0%, #5b5bf0 100%); }
html[data-theme="dark"] .alerta { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #fecaca; }
html[data-theme="dark"] .alerta.ok { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); color: #bbf7d0; }
html[data-theme="dark"] .alerta .close { color: #fecaca; text-shadow: none; }
html[data-theme="dark"] .tema-btn { background: #111a2e; }
html[data-theme="dark"] .tema-btn .bi-sun { display: inline; }
html[data-theme="dark"] .tema-btn .bi-moon-stars { display: none; }