@charset "utf-8";
/*
 * Tokens do estilo quadrinho (comic), usados em todas as telas.
 */

@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-yellow: #FFD21F;
	--comic-brand: #8E5BD9;
	--comic-card: #F7F8FB;
	--comic-border: 3px solid var(--color-outline);
	--comic-shadow: 6px 6px 0 var(--color-outline);
}

/* Seletor de idioma */
.lang-switch {
	display: inline-flex;
	align-self: center;
	background-color: #FFFFFF;
	border: 2px solid var(--color-outline);
	border-radius: 10px;
	box-shadow: 3px 3px 0 var(--color-outline);
	overflow: hidden;
}

.lang-switch-btn {
	padding: 6px 12px 4px;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 20px;
	letter-spacing: 1px;
	color: var(--color-title);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.lang-switch-btn + .lang-switch-btn { border-left: 2px solid var(--color-outline); }

.lang-switch-btn:hover { background-color: var(--comic-card); }

.lang-switch-btn.active {
	color: var(--color-outline);
	background-color: var(--comic-yellow);
	cursor: default;
}

.lang-switch-fixed {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 10;
}

/* Botões no estilo quadrinho */
.comic-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px 6px 12px;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 22px;
	letter-spacing: 1px;
	color: var(--color-title);
	background-color: #FFFFFF;
	border: var(--comic-border);
	border-radius: 10px;
	box-shadow: 4px 4px 0 var(--color-outline);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

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

.comic-btn-primary { color: var(--color-outline); background-color: var(--comic-yellow); }

.comic-btn-primary i { color: var(--color-outline); }

.comic-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--color-outline); }

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

/* Estado vazio (helper empty_state()) */
.comic-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 44px 24px 38px;
	text-align: center;
	background-color: var(--comic-card);
	background-image: radial-gradient(rgba(74, 84, 104, 0.09) 1.6px, transparent 1.8px);
	background-size: 14px 14px;
	border: var(--comic-border);
	border-radius: 14px;
	box-shadow: var(--comic-shadow);
}

.comic-empty-art {
	position: relative;
	display: grid;
	place-items: center;
	width: 150px;
	height: 150px;
	margin-bottom: 4px;
	animation: comic-float 3s ease-in-out infinite;
}

.comic-empty-burst,
.comic-empty-burst::after {
	position: absolute;
	clip-path: polygon(50% 0%, 61% 18%, 82% 9%, 79% 31%, 100% 38%, 84% 54%, 96% 75%, 73% 76%, 65% 98%, 50% 84%, 35% 98%, 27% 76%, 4% 75%, 16% 54%, 0% 38%, 21% 31%, 18% 9%, 39% 18%);
}

.comic-empty-burst { inset: 0; background-color: var(--color-outline); }

.comic-empty-burst::after { content: ''; inset: 8px; background-color: var(--comic-yellow); }

.comic-empty-art i {
	position: relative;
	font-size: 64px;
	color: var(--color-outline);
	transform: rotate(-12deg);
}

.comic-empty-bubble {
	position: absolute;
	top: 0;
	right: -10px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 30px;
	color: var(--comic-red);
	background-color: #FFFFFF;
	border: var(--comic-border);
	border-radius: 50%;
	box-shadow: 3px 3px 0 var(--color-outline);
	transform: rotate(12deg);
}

.comic-empty-title {
	margin: 0;
	font-family: 'Bangers', Verdana, Arial;
	font-size: 38px;
	font-weight: normal;
	line-height: 1;
	letter-spacing: 1.5px;
	color: var(--color-outline);
}

.comic-empty-text {
	max-width: 440px;
	margin: 0;
	font-family: 'Montserrat', Verdana, Arial;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-text);
}

.comic-empty-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 10px;
}

@keyframes comic-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
	.comic-empty-art { animation: none; }
}

@media (max-width: 600px) {
	.comic-empty { padding: 32px 16px 28px; }
	.comic-empty-art { width: 120px; height: 120px; }
	.comic-empty-art i { font-size: 52px; }
	.comic-empty-title { font-size: 30px; }
}

/* O atributo hidden sempre esconde (classes com display: flex não o sobrescrevem) */
[hidden] { display: none !important; }

/*
 * Senha sem o gerenciador do navegador: o campo já sai do servidor como
 * type="text" class="secret-input" (o Firefox trata como senha qualquer campo
 * que um dia foi type="password", então trocar o tipo por JS não basta).
 * Chrome, Safari e Firefox mascaram com -webkit-text-security; a fonte
 * text-security (todo caractere é uma bolinha) é a reserva para quem não
 * tem essa propriedade (SIL OFL, www/fonts/text-security-LICENSE.txt).
 */
@font-face {
	font-family: 'glooom-secret';
	src: url('../fonts/text-security-disc.woff2') format('woff2'),
		url('../fonts/text-security-disc-compat.woff2') format('woff2');
	font-display: block;
}

.secret-input:not(.revealed) {
	font-family: 'glooom-secret' !important;
	-webkit-text-security: disc;
	letter-spacing: 2px;
}

.secret-input::placeholder { font-family: 'Montserrat', Verdana, Arial; letter-spacing: 0; }