@charset "utf-8";
/*
 * Login - estilo quadrinho (baseado no tema de artigos de www.sandrojordao.com.br)
 */

@import url("icons.css");

@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
	--color-outline: #4A5468;
	--color-title: #5B6376;
	--color-text: #4E5566;
	--comic-accent: #12A8C3;
	--comic-red: #db4551;
	--comic-brand: #8E5BD9;
	--comic-card: #F7F8FB;
}

* {
	outline: none;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	font-family: 'Montserrat', Verdana, Arial;
	font-size: 14px;
	color: var(--color-text);
	background-color: var(--comic-accent);
	background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.5px, transparent 1.7px);
	background-size: 12px 12px;
	overflow-x: hidden;
}

.main-login {
	width: 100vw;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
}

.main-login-center {
	width: 100%;
	max-width: 440px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Card em forma de balão de fala */
.comic-balloon {
	position: relative;
	width: 100%;
	min-height: 440px;
	padding: 12px 34px 28px 34px;
	background-color: var(--comic-card);
	border: 3px solid var(--color-outline);
	border-radius: 18px;
	box-shadow: 8px 8px 0 rgba(30, 38, 51, 0.28);
}

.comic-balloon::before,
.comic-balloon::after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

.comic-balloon::before {
	left: 52px;
	bottom: -32px;
	border-width: 32px 32px 0 0;
	border-color: var(--color-outline) transparent transparent transparent;
}

.comic-balloon::after {
	left: 56px;
	bottom: -24px;
	border-width: 25px 25px 0 0;
	border-color: var(--comic-card) transparent transparent transparent;
}

#div-login, #div-register, #div-about {
	position: relative;
}

#div-register, #div-about {
	display: none;
}

/* Títulos */
#content-title-login {
	margin: 18px 0 20px 0;
}

.content-title-register,
.content-title-about {
	text-align: center;
	margin: 22px 0 18px 0;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 52px;
	line-height: 50px;
	letter-spacing: 1.5px;
	color: var(--color-title);
	text-shadow: 2px 2px 0 rgba(74, 84, 104, 0.2);
}

.content-title-about { margin-bottom: 26px; }

.content-title-about .about-yellow,
.content-title-about .about-red,
.content-title-register .register-blue,
.content-title-register .register-brand {
	-webkit-text-stroke: 2px var(--color-outline);
	paint-order: stroke fill;
	text-shadow: 3px 3px 0 var(--color-outline);
}

.content-title-register .register-blue { color: var(--comic-accent); }

.content-title-register .register-brand { color: var(--comic-brand); }

.content-title-about .about-yellow { color: #FFD21F; }

.content-title-about .about-red {
	color: var(--comic-red);
	font-size: 56px;
	margin-left: -8px;

}

.content-title-register upper,
.content-title-about upper {
	color: var(--comic-accent);
	font-size: 46px;
}

/* Campos */
.comic-field {
	margin-bottom: 16px;
}

.comic-field label {
	display: block;
	margin: 0 0 4px 4px;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 18px;
	letter-spacing: 1px;
	color: var(--color-title);
}

.comic-input-wrap {
	position: relative;
}

.comic-input-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	color: var(--comic-accent);
	pointer-events: none;
	z-index: 1;
}

.comic-input {
	width: 100%;
	height: 46px;
	padding: 0 14px 0 44px;
	font-family: inherit;
	font-size: 15px;
	color: var(--color-text);
	background-color: #FFFFFF;
	border: 2px solid var(--color-outline);
	border-radius: 10px;
	box-shadow: 3px 3px 0 rgba(74, 84, 104, 0.25);
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.comic-input:focus {
	border-color: var(--comic-accent);
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--comic-accent);
}

.comic-input.input-error {
	border-color: var(--comic-red);
	box-shadow: 3px 3px 0 var(--comic-red);
}

.comic-input-wrap .icon-required {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	color: var(--comic-red);
}

/* Botão: sombra sólida que afunda ao clicar */
.comic-button-div {
	margin-top: 24px;
	text-align: center;
}

.comic-button {
	display: inline-block;
	padding: 8px 28px 6px 28px;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: 1.5px;
	color: #FFFFFF;
	background-color: var(--comic-red);
	border: 2px solid var(--color-outline);
	border-radius: 10px;
	box-shadow: 4px 4px 0 var(--color-outline);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease;
}

.comic-button:hover,
.comic-button:focus-visible {
	background-color: #E35A65;
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--color-outline);
}

.comic-button:active {
	transform: translate(3px, 3px);
	box-shadow: 1px 1px 0 var(--color-outline);
}

/* Mensagem de erro */
#div-message-error {
	display: none;
	margin-top: 18px;
	padding: 8px 12px;
	text-align: center;
	font-size: 13px;
	color: #FFFFFF;
	background-color: var(--comic-red);
	border: 2px solid var(--color-outline);
	border-radius: 10px;
	box-shadow: 3px 3px 0 var(--color-outline);
}

#div-message-error i {
	font-size: 20px;
	vertical-align: -4px;
	margin-right: 6px;
}

/* Etiquetas-adesivo de navegação */
.login-action {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: 52px;
}

.comic-sticker {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px 4px 14px;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 22px;
	letter-spacing: 1px;
	color: var(--color-title);
	background-color: #FFFFFF;
	border: 2px solid var(--color-outline);
	border-radius: 10px;
	box-shadow: 3px 3px 0 var(--color-outline);
	cursor: pointer;
	transform: rotate(-2deg);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.comic-sticker.right {
	transform: rotate(1.5deg);
}

.comic-sticker i {
	font-size: 24px;
	color: var(--comic-accent);
}

.comic-sticker:hover {
	background-color: #FFF6C9;
	transform: translate(-2px, -2px) rotate(0deg);
	box-shadow: 5px 5px 0 var(--color-outline);
}

/* Sobre: painéis de quadrinho com explosões de onomatopeia */
.whats-caption {
	display: block;
	width: fit-content;
	margin: 0 auto 18px auto;
	padding: 4px 12px 2px 12px;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 17px;
	letter-spacing: 1px;
	color: var(--color-outline);
	background-color: #FFF3B0;
	border: 2px solid var(--color-outline);
	box-shadow: 3px 3px 0 var(--color-outline);
	transform: rotate(-1deg);
}

.whats-item {
	--burst: var(--comic-accent);
	--tilt: 0deg;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 14px 0;
	padding: 8px 14px 8px 8px;
	text-decoration: none;
	background-color: #FFFFFF;
	background-image: radial-gradient(rgba(74, 84, 104, 0.12) 1px, transparent 1.2px);
	background-size: 7px 7px;
	border: 2px solid var(--color-outline);
	border-radius: 6px;
	box-shadow: 4px 4px 0 var(--color-outline);
	transform: rotate(var(--tilt));
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whats-item:hover,
.whats-item:focus-visible {
	transform: translate(-2px, -2px) rotate(0deg);
	box-shadow: 7px 7px 0 var(--color-outline);
}

.whats-item:active {
	transform: translate(3px, 3px);
	box-shadow: 1px 1px 0 var(--color-outline);
}

.whats-burst {
	flex: 0 0 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 21px;
	letter-spacing: 1px;
	color: #FFFFFF;
	-webkit-text-stroke: 1px var(--color-outline);
	paint-order: stroke fill;
	text-shadow: 2px 2px 0 var(--color-outline);
	background-color: var(--burst);
	clip-path: polygon(50% 0%, 61% 14%, 79% 8%, 80% 27%, 98% 30%, 88% 46%, 100% 60%, 82% 68%, 86% 88%, 67% 85%, 57% 100%, 45% 87%, 27% 96%, 22% 77%, 4% 72%, 13% 55%, 0% 42%, 18% 33%, 20% 14%, 38% 18%);
	transform: rotate(-8deg);
	transition: transform 0.3s ease;
}

.whats-item:hover .whats-burst {
	transform: rotate(8deg) scale(1.12);
}

.whats-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.whats-item .title {
	font-family: 'Bangers', Verdana, Arial;
	font-size: 28px;
	line-height: 30px;
	letter-spacing: 1px;
	color: var(--color-title);
	text-shadow: 2px 2px 0 rgba(74, 84, 104, 0.2);
}

.whats-item .link {
	font-size: 13px;
	color: var(--color-text);
	overflow-wrap: anywhere;
}

@media (max-width: 480px) {
	.comic-balloon { padding: 8px 20px 24px 20px; }
	.comic-sticker { font-size: 18px; }
}

/* Nova senha depois de um reset do admin */
.newpass-text {
	margin: -4px 0 14px;
	font-family: 'Montserrat', Verdana, Arial;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
	color: var(--color-text);
}