/* =============================================================================
   AUTH.CSS - telas fora do editor (index.php, verificar.php, redefinir.php)
   ÍNDICE
   01. AJUSTES FINOS (cores, logo, tamanhos, tipografia): comece por aqui
   02. Base
   03. Cartão e logo
   04. Textos
   05. Formulários
   06. Botões e links
   07. Mensagens
   08. Rodapé de links
   ============================================================================= */


/* ===== 01. AJUSTES FINOS ===== */
:root {
	/* Cores */
	--bg: #f4f6fa;            /* fundo da página */
	--pn: #fff;               /* fundo do cartão */
	--bd: #dde2ec;            /* bordas */
	--tx: #1d2433;            /* texto */
	--mu: #6b7488;            /* texto secundário */
	--ac: #4f8ef7;            /* cor de destaque (botão, foco, links) */
	--ac-tx: #fff;            /* texto sobre a cor de destaque */
	--err: #d93025;
	--err-bg: #fdecea;
	--ok: #1e8e3e;
	--ok-bg: #e6f4ea;

	/* Logo (área reservada em auth_logo.php) */
	--logo-w: 180px;
	--logo-h: 56px;
	--logo-gap: 24px;         /* espaço entre o logo e o título */

	/* Cartão */
	--card-w: 400px;
	--card-pad: 32px;
	--card-radius: 14px;
	--card-shadow: 0 8px 30px rgba(0, 0, 0, .08);

	/* Campos e botões */
	--field-h: 40px;
	--field-radius: 8px;
	--btn-radius: 8px;
	--gap: 14px;              /* espaço vertical entre campos */

	/* Tipografia */
	--font: system-ui, sans-serif;
	--fs: 14px;
	--fs-small: 13px;
	--fs-title: 22px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #12151c;
		--pn: #1b1f29;
		--bd: #2c3240;
		--tx: #e6e9f0;
		--mu: #8b93a7;
		--err: #f28b82;
		--err-bg: #3a1f1d;
		--ok: #81c995;
		--ok-bg: #1d3325;
		--card-shadow: 0 8px 30px rgba(0, 0, 0, .4);
	}
}


/* ===== 02. Base ===== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 16px;
	font: var(--fs) var(--font);
	background: var(--bg);
	color: var(--tx);
}


/* ===== 03. Cartão e logo ===== */
.auth {
	width: 100%;
	max-width: var(--card-w);
	padding: var(--card-pad);
	background: var(--pn);
	border: 1px solid var(--bd);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
}

.auth-head { display: flex; justify-content: center; margin-bottom: var(--logo-gap); }

.auth-logo {
	width: var(--logo-w);
	height: var(--logo-h);
	display: grid;
	place-items: center;
}
.auth-logo img { max-width: 100%; max-height: 100%; display: block; }

/* Marcador temporário: apague junto com o <span> em auth_logo.php */
.auth-logo-ph {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	border: 1.5px dashed var(--bd);
	border-radius: 8px;
	color: var(--mu);
	font-size: var(--fs-small);
}


/* ===== 04. Textos ===== */
.auth-title { margin: 0 0 6px; font-size: var(--fs-title); font-weight: 600; text-align: center; }
.auth-sub { margin: 0 0 22px; color: var(--mu); text-align: center; line-height: 1.45; }


/* ===== 05. Formulários ===== */
.field { display: block; margin-bottom: var(--gap); }
.field > span { display: block; margin-bottom: 6px; color: var(--mu); font-size: var(--fs-small); }
.field > small { display: block; margin-top: 4px; color: var(--mu); font-size: 12px; }

.field input {
	width: 100%;
	height: var(--field-h);
	padding: 0 12px;
	font: inherit;
	color: var(--tx);
	background: var(--bg);
	border: 1px solid var(--bd);
	border-radius: var(--field-radius);
}
.field input:focus { outline: 2px solid var(--ac); outline-offset: 0; border-color: var(--ac); }


/* ===== 06. Botões e links ===== */
.btn {
	display: block;
	width: 100%;
	height: var(--field-h);
	line-height: var(--field-h);
	padding: 0 14px;
	font: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	color: var(--ac-tx);
	background: var(--ac);
	border: 1px solid var(--ac);
	border-radius: var(--btn-radius);
	cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }

.link {
	padding: 0;
	font: inherit;
	font-size: var(--fs-small);
	color: var(--ac);
	background: none;
	border: 0;
	text-decoration: none;
	cursor: pointer;
}
.link:hover { text-decoration: underline; }


/* ===== 07. Mensagens ===== */
.msg {
	margin: 0 0 var(--gap);
	padding: 9px 12px;
	font-size: var(--fs-small);
	line-height: 1.4;
	border-radius: var(--field-radius);
}
.msg.err { color: var(--err); background: var(--err-bg); }
.msg.ok { color: var(--ok); background: var(--ok-bg); }


/* ===== 08. Rodapé de links ===== */
.auth-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
}