@charset "utf-8";
/* ===================================================================
   TEMA OTPOKETIBIA - camada visual
   Aplicado por cima da folha antiga (style.css), sem alterar
   nenhum arquivo PHP, formulario, rota ou endereco.
   =================================================================== */

:root {
	--ot-blue-950: #04101f;
	--ot-blue-900: #071c33;
	--ot-blue-800: #0b2b4d;
	--ot-blue-700: #103d69;
	--ot-blue-600: #17558f;
	--ot-blue-500: #1f74bb;
	--ot-blue-400: #3d97dd;
	--ot-blue-300: #74bdf0;
	--ot-cyan: #6fe3ff;
	--ot-gold: #ffd34d;
	--ot-gold-deep: #f0a41b;
	--ot-gold-dark: #b96f06;
	--ot-ink: #062033;
	--ot-paper: #f4fbff;
	--ot-text: #0f2b42;
	--ot-muted: #5d7d96;
	--ot-green: #2fbf5f;
	--ot-red: #e04a4a;
	--ot-radius: 16px;
	--ot-shadow: 0 10px 30px rgba(2, 14, 28, 0.45);
	--ot-shadow-sm: 0 4px 14px rgba(2, 14, 28, 0.32);
	--ot-gold-glow: 0 0 0 1px rgba(255, 211, 77, 0.45), 0 6px 18px rgba(240, 164, 27, 0.35);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
	color: var(--ot-text);
	background-color: var(--ot-blue-950);
	background-image:
		radial-gradient(1100px 520px at 50% -10%, rgba(61, 151, 221, 0.35), transparent 70%),
		linear-gradient(180deg, #061a30 0%, #04101f 55%, #020a14 100%);
	background-attachment: fixed;
	line-height: 1.5;
}

/* Brilho superior que lembra o ceu do mapa */
body::before {
	content: "";
	display: block;
	height: 6px;
	background: linear-gradient(90deg, var(--ot-gold-deep) 0%, var(--ot-gold) 25%, var(--ot-cyan) 55%, var(--ot-blue-500) 100%);
	box-shadow: 0 2px 14px rgba(111, 227, 255, 0.35);
}

a:link,
a:visited { color: var(--ot-blue-600); text-decoration: none; }
a:hover { color: var(--ot-gold-deep); text-decoration: none; }
a:focus-visible { outline: 3px solid var(--ot-gold); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3 {
	font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
	font-weight: 700;
	color: var(--ot-blue-800);
}

/* =========================== ESTRUTURA =========================== */

.page {
	width: 100%;
	min-height: 100%;
	padding-bottom: 34px;
	overflow-x: hidden;
}

.mainbody {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 14px;
}

/* ------------------------------ LOGO ------------------------------ */

.brand {
	display: block;
	text-decoration: none;
}

.header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 214px;
	width: 100%;
	margin-top: 14px;
	/* A folha antiga (style.css) ainda pinta a imagem logo.png aqui.
	   Sem isso o texto 3D ficaria por cima da imagem e o "UNIVERSE"
	   apareceria duplicado. */
	background-image: none;
}

/* ===================== LOGO 3D EM TEXTO ==========================
   O titulo antes era a imagem logo.png (950x150). Agora e texto de
   verdade: fica nitido em qualquer tamanho, tem profundidade de
   verdade (camadas de sombra) e permite animacao. O data-text
   repete o texto para gerar a "copia" deslocada do efeito 3D. */

/* Tirado do fluxo: o .dex (Pokemon do canto) e irmao do logo dentro
   do .header, e como item flex ele empurrava o titulo do centro. */
.ot-logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.ot-logo__main,
.ot-logo__sub {
	position: relative;
	display: block;
	/* Estilo cartoon: fonte de traço arredondado. Comic Sans MS e a
	   mais parecida com a referencia e vem no Windows. As outras duas
	   sao reservas caso o visitante nao a tenha. */
	font-family: "Comic Sans MS", "Arial Rounded MT Bold", "Trebuchet MS", Tahoma, sans-serif;
	font-weight: 700;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 0;
}

/* ------------------------------ titulo ---------------------------- */

.ot-logo__main {
	font-size: 68px;
	line-height: 1.05;
	letter-spacing: 0.5px;
}

.ot-logo__main::before,
.ot-logo__main::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	pointer-events: none;
}

/* Antes o titulo usava duas copias do texto (::before e ::after) com
   contorno marrom para fingir o volume. Em cima do fundo escuro do
   mapa as duas faces se misturavam e o dourado saia marrom.
   Agora o volume vem de um unico texto: contorno escuro + sombras
   projetadas para baixo. O amarelo fica limpo. */
.ot-logo__main::before,
.ot-logo__main::after { content: none; }

/* o miolo do texto: dourado vivo */
.ot-logo__main {
	/* o fundo e 3x mais largo que o texto para o brilho (ot-shine)
	   poder atravessar as letras da esquerda para a direita */
	background-image:
		linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 62%),
		linear-gradient(180deg, #fff9c4 0%, #ffe93d 26%, #ffd000 55%, #f5a000 100%);
	background-size: 300% 100%, 100% 100%;
	background-repeat: no-repeat;
	background-position: 0% 50%, 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	/* -webkit-text-stroke precisa vir com fill transparente, mas o
	   filtro e aplicado no elemento inteiro e nao no texto, entao
	   ficamos so com as sombras projetadas para dar profundidade */
	-webkit-text-fill-color: transparent;
	/*
	 No Chrome o contorno eh pintado POR CIMA do gradiente. Com 5px ele
	 cobria as letras e o titulo saida marrom. Medindo os pixels da
	 captura: 3816 px marrons contra quase nenhum amarelo.
	 Agora o contorno e fino (2px) e quem cria o volume eh a pilha de
	 sombras escuras logo abaixo, exatamente como na referencia. */
	-webkit-text-stroke: 2px #4a2a00;
	filter:
		drop-shadow(0 4px 0 #4a2a00)
		drop-shadow(0 6px 1px rgba(0, 0, 0, 0.45))
		drop-shadow(0 10px 14px rgba(0, 0, 0, 0.4))
		drop-shadow(0 0 26px rgba(255, 196, 20, 0.55));
	animation:
		ot-3d-main 6s ease-in-out infinite,
		ot-shine 7s linear infinite;
}

@keyframes ot-3d-main {
	0%, 100% {
		transform: perspective(700px) rotateX(0deg) rotateY(0deg) translateY(0);
	}
	30% {
		transform: perspective(700px) rotateX(5deg) rotateY(-7deg) translateY(-5px);
	}
	60% {
		transform: perspective(700px) rotateX(-3deg) rotateY(7deg) translateY(-2px);
	}
}

/* brilho que atravessa as letras: a primeira camada (brilho) anda
   de -160% ate 260%, a segunda (dourado base) fica parada */
@keyframes ot-shine {
	0% { background-position: -160% 50%, 0% 50%; }
	100% { background-position: 260% 50%, 0% 50%; }
}

/* ----------------------------- sub ------------------------------- */

.ot-logo__sub {
	font-size: 22px;
	line-height: 1;
	letter-spacing: 12px;
	text-indent: 12px;
	background-image: linear-gradient(180deg, #ffffff 0%, #cdefff 45%, #63b4e0 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1.2px rgba(6, 34, 58, 0.85);
	filter:
		drop-shadow(0 2px 0 rgba(4, 26, 46, 0.85))
		drop-shadow(0 7px 12px rgba(0, 0, 0, 0.45))
		drop-shadow(0 0 16px rgba(111, 227, 255, 0.35));
	animation: ot-3d-sub 6s ease-in-out infinite;
}

/* o "UNIVERSE" usa apenas a sombra projetada: uma camada extra
   aqui deixava o texto com aspecto de copia */
.ot-logo__sub::before { content: none; }

@keyframes ot-3d-sub {
	0%, 100% { transform: rotateX(0deg) translateY(0); }
	30% { transform: rotateX(5deg) translateY(-3px); }
	60% { transform: rotateX(-3deg) translateY(-1px); }
}

/* ---------------------- faixa do servidor ------------------------ */

.ot-logo__world {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 8px 22px;
	border-radius: 10px;
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.6px;
	color: #ffffff;
	background: linear-gradient(180deg, var(--ot-blue-500) 0%, var(--ot-blue-700) 100%);
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow:
		0 6px 16px rgba(2, 14, 28, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		inset 0 -2px 5px rgba(0, 20, 40, 0.35);
	text-shadow: 0 1px 3px rgba(0, 20, 40, 0.8);
}

/* bandeirinha do Brasil desenhada em CSS (verde, amarelo e azul) */
.ot-logo__flag {
	position: relative;
	display: inline-block;
	width: 22px;
	height: 15px;
	border-radius: 2px;
	background: linear-gradient(180deg, #1f9c4d 0%, #1f9c4d 50%, #f5d020 50%, #f5d020 100%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.ot-logo__flag::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #4a7fd4 0%, #1e3f8f 70%, #16307a 100%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.dex {
	height: 132px;
	width: 132px;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	float: right;
	margin: 6px 4px 0 0;
	filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
	animation: ot-float 5s ease-in-out infinite;
}

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

/* --------------------------- NAVEGACAO --------------------------- */

.navbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 9px 12px;
	margin: 6px 0 18px 0;
	border-radius: var(--ot-radius);
	background:
		linear-gradient(180deg, rgba(31, 116, 187, 0.95) 0%, rgba(11, 43, 77, 0.96) 100%);
	border: 1px solid rgba(116, 189, 240, 0.35);
	box-shadow: var(--ot-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
	overflow: visible;
}

.navbar a {
	float: none;
	display: inline-block;
}

.navbar_link {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 8px 15px;
	border-radius: 10px;
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.3px;
	line-height: 18px;
	color: #eaf6ff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	white-space: nowrap;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02));
	border: 1px solid rgba(255, 255, 255, 0.18);
	transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease;
}

.navbar a:hover .navbar_link,
.navbar_link:hover {
	color: #fff;
	background: linear-gradient(180deg, var(--ot-gold) 0%, var(--ot-gold-deep) 100%);
	border-color: rgba(255, 255, 255, 0.55);
	text-shadow: 0 1px 3px rgba(120, 60, 0, 0.6);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(240, 164, 27, 0.35);
}

/* ============================ GRADE ============================== */

.layout {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr) 232px;
	gap: 18px;
	align-items: start;
}

.col { min-width: 0; }
.col-main { min-width: 0; }

/* ---------------------------- BANNER ----------------------------- */

.slider_bg {
	position: relative;
	margin-bottom: 16px;
	padding: 8px;
	border-radius: calc(var(--ot-radius) + 6px);
	background: linear-gradient(180deg, #ffffff 0%, #dbeefc 100%);
	border: 1px solid rgba(116, 189, 240, 0.6);
	box-shadow: var(--ot-shadow);
	line-height: 0;
	overflow: hidden;
}

.slider_bg::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 2px rgba(255, 211, 77, 0.55);
	pointer-events: none;
}

#featured {
	opacity: 1 !important;
	filter: none !important;
	background: transparent;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}

#featured img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 96px;
	border-radius: 10px;
}

/* ====================== BANNER PRINCIPAL ========================= */

/* O banner antes posicionava os sprites em absolute e o texto em
   max-width %. Em telas medias os dois se sobrepunham (o Rayquaza
   cobria a descricao). Agora e uma linha flex: texto e sprites
   dividem o espaco e nunca se cruzam. */
.ot-banner {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 210px;
	border-radius: 12px;
	overflow: hidden;
	line-height: 1.4;
	background: linear-gradient(135deg, #0d3f6b 0%, #06203a 100%);
}

/* mapa ao fundo: a imagem original e 2380x1500 e ja tem um azul
   forte na metade de baixo. Recortamos so a faixa de montanhas do
   topo, que e a parte interessante, e deixamos o restante no azul
   do proprio banner. */
.ot-banner__bg {
	position: absolute;
	inset: 0;
	background-image: url(../images/img/background.jpg);
	background-repeat: no-repeat;
	background-position: center -120px;
	background-size: auto 620px;
	opacity: 0.9;
}

/* escurece o mapa para o texto ficar legivel */
.ot-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(4, 22, 40, 0.92) 0%, rgba(6, 34, 58, 0.66) 46%, rgba(9, 52, 84, 0.18) 78%, rgba(12, 66, 104, 0.08) 100%),
		linear-gradient(180deg, rgba(4, 22, 40, 0.62) 0%, rgba(4, 22, 40, 0.10) 42%, rgba(6, 60, 100, 0.72) 100%);
	pointer-events: none;
}

/* ------------------------- textos ------------------------------- */

.ot-banner__text {
	position: relative;
	z-index: 3;
	flex: 1 1 auto;
	min-width: 0;
	padding: 20px 22px;
}

.ot-banner__kicker {
	display: inline-block;
	margin-bottom: 6px;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #06283f;
	background: linear-gradient(90deg, var(--ot-gold) 0%, var(--ot-gold-deep) 100%);
	box-shadow: 0 4px 12px rgba(240, 164, 27, 0.4);
}

.ot-banner__title {
	display: block;
	font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
	font-size: 40px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 1px;
	background: linear-gradient(180deg, #fff6cf 0%, var(--ot-gold) 45%, var(--ot-gold-deep) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(11, 43, 77, 0.55);
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}

.ot-banner__sub {
	display: block;
	margin-top: 2px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 8px;
	color: #bfe9ff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.ot-banner__desc {
	max-width: 34em;
	margin: 9px 0 12px 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #d8eefc;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

.ot-banner__cta,
.ot-banner__cta:link,
.ot-banner__cta:visited,
.ot-banner__cta:hover,
.ot-banner__cta:active {
	display: inline-block;
	padding: 10px 24px;
	border-radius: 11px;
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 1.4px;
	color: #ffffff;
	text-decoration: none;
	text-shadow: 0 2px 3px rgba(90, 45, 0, 0.75);
	background: linear-gradient(180deg, #4fd6ff 0%, var(--ot-blue-500) 55%, var(--ot-blue-700) 100%);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 8px 20px rgba(2, 14, 28, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
	transition: transform 0.14s ease, filter 0.2s ease;
}

.ot-banner__cta:hover {
	color: #ffffff;
	transform: translateY(-2px);
	filter: brightness(1.12);
	box-shadow: 0 12px 26px rgba(2, 14, 28, 0.6), 0 0 18px rgba(79, 214, 255, 0.45);
}



/* ------------------------- sprites ------------------------------ */

/* time em fluxo normal, encostado a direita: como o texto ocupa o
   resto da largura, os dois nunca se sobrepoem */
.ot-banner__team {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 6px;
	flex: 0 0 auto;
	padding: 0 14px 8px 0;
	pointer-events: none;
}

.ot-hero {
	position: relative;
	width: auto;
	height: 108px;
	flex: 0 0 auto;
	filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6));
}

.ot-hero--1 { height: 126px; animation: ot-float 6s ease-in-out infinite; }
.ot-hero--2 { height: 104px; animation: ot-float 6s ease-in-out infinite 1.1s; }
.ot-hero--3 { height: 110px; animation: ot-float 6s ease-in-out infinite 2.2s; }

/* Em telas medias escondemos um sprite de cada vez. Como o time esta
   em fluxo flex, basta ocultar: o texto ganha espaco sozinho. */
@media (max-width: 900px) {
	.ot-banner__text { padding: 16px 18px; }
	.ot-banner__title { font-size: 30px; }
	.ot-banner__sub { letter-spacing: 5px; font-size: 12px; }
	.ot-banner__desc { font-size: 12px; }
	.ot-hero--1 { height: 96px; }
	.ot-hero--2 { height: 78px; }
	.ot-hero--3 { display: none; }
}

@media (max-width: 620px) {
	.ot-banner { min-height: 170px; }
	.ot-banner__text { padding: 14px; }
	.ot-banner__title { font-size: 25px; }
	.ot-banner__sub { letter-spacing: 3px; }
	.ot-banner__desc { display: none; }
	.ot-hero--1 { height: 78px; }
	.ot-hero--2 { display: none; }
}

/* =========================== CARDS =============================== */

.newscont,
.panel {
	position: relative;
	background: linear-gradient(180deg, #ffffff 0%, #f2f9ff 100%);
	border: 1px solid rgba(23, 85, 143, 0.18);
	border-radius: var(--ot-radius);
	box-shadow: var(--ot-shadow);
	color: var(--ot-text);
	overflow: hidden;
}

.newscont {
	padding: 18px;
	margin-bottom: 22px;
	font-size: 13px;
}

.panel {
	padding: 14px;
	margin-bottom: 16px;
}

/* faixa colorida no topo de cada card */
.newscont::before,
.panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--ot-blue-500), var(--ot-cyan), var(--ot-gold));
}

.panel-title {
	margin: -14px -14px 12px -14px;
	padding: 13px 12px 12px 12px;
	border-radius: 0;
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	text-align: center;
	color: #ffffff;
	text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
	background:
		linear-gradient(180deg, var(--ot-blue-500) 0%, var(--ot-blue-700) 60%, var(--ot-blue-900) 100%);
	border-bottom: 2px solid var(--ot-gold);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.panel-dex {
	height: 78px;
	margin: 2px 0 10px 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	filter: drop-shadow(0 6px 10px rgba(6, 32, 51, 0.28));
}

.panel-links {
	font-size: 13px;
	color: var(--ot-text);
}

.panel-links a, .panel-links .otp-logout-button {
	display: block;
	position: relative;
	padding: 7px 8px 7px 20px;
	margin: 2px 0;
	line-height: 17px;
	border-radius: 8px;
	color: var(--ot-blue-700);
	border: 1px solid transparent;
	transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.panel-links a::before, .panel-links .otp-logout-button::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 13px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ot-gold);
	box-shadow: 0 0 0 2px rgba(255, 211, 77, 0.28);
}

.panel-links a:hover, .panel-links .otp-logout-button:hover {
	color: #ffffff;
	background: linear-gradient(90deg, var(--ot-blue-500), var(--ot-blue-700));
	transform: translateX(3px);
	box-shadow: var(--ot-shadow-sm);
}

.mundo_links {
	padding: 6px 4px 2px 4px;
	font-size: 13px;
	color: var(--ot-text);
}

.status-online,
.status-offline {
	display: inline-block;
	margin-bottom: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.4px;
	color: #fff;
}

.status-online {
	background: linear-gradient(180deg, #4fe08a, var(--ot-green));
	box-shadow: 0 4px 12px rgba(47, 191, 95, 0.4);
}

.status-offline {
	background: linear-gradient(180deg, #f07070, var(--ot-red));
	box-shadow: 0 4px 12px rgba(224, 74, 74, 0.4);
}

/* -------------------------- LOGIN -------------------------------- */

.loginform { text-align: center; padding: 2px 0 4px 0; }

.loginform input.input,
.menu_nav input.input {
	width: 100%;
	height: 36px;
	margin: 4px 0;
	padding: 0 10px;
	border-radius: 10px;
	border: 2px solid var(--ot-blue-300);
	background: #ffffff;
	color: var(--ot-ink);
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	font-size: 14px;
	text-align: center;
	box-shadow: inset 0 2px 4px rgba(11, 43, 77, 0.1);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.loginform input.input:focus,
.menu_nav input.input:focus {
	outline: none;
	border-color: var(--ot-gold);
	box-shadow: 0 0 0 4px rgba(255, 211, 77, 0.28);
}

/* O botao usava playnowbutton.png (119x36) esticada para o tamanho
   do campo. O reflexo vertical da imagem ficava sobre o texto e
   deixava "ENTRAR" ilegivel. Agora o visual e 100% CSS: o texto
   fica sempre nitido em qualquer largura. */
.loginform input.loginbutton,
.menu_nav input.loginbutton {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 44px;
	margin-top: 9px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 12px;
	cursor: pointer;
	background-image: linear-gradient(180deg, #4fd6ff 0%, #1f74bb 52%, #0b2b4d 100%);
	background-repeat: no-repeat;
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 42px;
	color: #ffffff;
	text-align: center;
	text-indent: 2px;
	text-shadow: 0 2px 4px rgba(0, 20, 40, 0.75);
	box-shadow:
		0 8px 20px rgba(2, 14, 28, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0 -2px 6px rgba(0, 20, 40, 0.35);
	transition: transform 0.12s ease, filter 0.2s ease;
}

.loginform input.loginbutton:hover,
.menu_nav input.loginbutton:hover {
	transform: translateY(-2px);
	filter: brightness(1.12);
	box-shadow:
		0 12px 26px rgba(2, 14, 28, 0.5),
		0 0 18px rgba(79, 214, 255, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.loginform input.loginbutton:active,
.menu_nav input.loginbutton:active {
	transform: translateY(0);
	filter: brightness(0.97);
}

/* ========================== CONTEUDO ============================= */

.newscont a { color: var(--ot-blue-600); font-weight: 700; }
.newscont a:hover { color: var(--ot-gold-deep); }

.newscont .newsTitle {
	padding: 10px 12px;
	margin-bottom: 8px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	color: #ffffff;
	background: linear-gradient(90deg, var(--ot-blue-700), var(--ot-blue-500));
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: var(--ot-shadow-sm);
}

.newscont .newsBody { padding: 6px 2px; color: #24455f; }
.newscont .newsFooter {
	padding: 8px 2px 2px 2px;
	border-top: 1px dotted rgba(23, 85, 143, 0.35);
	color: var(--ot-muted);
}

h2, h3 {
	color: var(--ot-blue-700);
	padding-left: 4px;
	letter-spacing: 0.4px;
}

.message {
	margin-bottom: 18px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(23, 85, 143, 0.2);
	box-shadow: var(--ot-shadow-sm);
	background: #ffffff;
}

.message .title {
	height: auto;
	padding: 11px 16px;
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffffff;
	background: linear-gradient(90deg, var(--ot-blue-600), var(--ot-blue-800));
	background-image: none;
	background-repeat: no-repeat;
	border-bottom: 2px solid var(--ot-gold);
}

.message .content { padding: 14px 16px; }
.message .bar {
	margin-left: 0;
	padding: 9px 16px;
	border-top: 1px solid rgba(23, 85, 143, 0.18);
	border-left: none;
	border-right: none;
	background: #eaf4fd;
}

center h3 { text-transform: none; }

.newscont center p a strong {
	display: inline-block;
	margin: 8px 0;
	padding: 12px 30px;
	border-radius: 12px;
	font-size: 15px;
	letter-spacing: 0.6px;
	color: #ffffff;
	text-decoration: none;
	background: linear-gradient(180deg, var(--ot-gold) 0%, var(--ot-gold-deep) 100%);
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: var(--ot-gold-glow);
	transition: transform 0.12s ease;
}

.newscont center p a strong:hover {
	color: #ffffff;
	transform: translateY(-2px);
	filter: brightness(1.06);
}

/* ------------------------ FORMULARIOS ---------------------------- */

fieldset {
	margin: 0 0 16px 0;
	padding: 14px 16px 16px 16px;
	border-radius: 12px;
	border: 1px solid rgba(23, 85, 143, 0.22);
	background: #fbfdff;
}

legend {
	padding: 0 10px;
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #ffffff;
	background: linear-gradient(90deg, var(--ot-blue-500), var(--ot-blue-700));
	border-radius: 8px;
	box-shadow: var(--ot-shadow-sm);
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
	max-width: 100%;
	padding: 9px 11px;
	border-radius: 9px;
	border: 2px solid #cfe2f2;
	background: #ffffff;
	color: var(--ot-ink);
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	font-size: 13px;
	box-shadow: inset 0 1px 3px rgba(11, 43, 77, 0.08);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--ot-blue-400);
	box-shadow: 0 0 0 4px rgba(61, 151, 221, 0.2);
}

label {
	float: none;
	display: block;
	width: auto;
	margin: 0;
	font-family: "Trebuchet MS", Tahoma, sans-serif;
	font-weight: 700;
	color: var(--ot-blue-800);
}

/* Tabelas de formulario (layout .table com listas) */
.table {
	background: transparent;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(23, 85, 143, 0.16);
}

.table ul { color: var(--ot-text); }

.table ul li {
	display: flex;
	align-items: center;
	padding: 6px 12px;
	height: auto;
	border-bottom: 1px solid rgba(23, 85, 143, 0.1);
}

.table ul li.title {
	color: #ffffff;
	background: linear-gradient(90deg, var(--ot-blue-700), var(--ot-blue-500));
}

.table ul li.even { background: #f4fafe; }
.table ul li.odd { background: #ffffff; }

.table ul li label { color: var(--ot-blue-800); }

/* Tabelas de dados */
.pTable,
table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	float: none;
	font-size: 13px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--ot-shadow-sm);
	background: #ffffff;
}

.pTable tr td,
table td,
table th {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(23, 85, 143, 0.12);
	text-align: left;
}

table th {
	color: #ffffff;
	font-weight: 700;
	background: linear-gradient(90deg, var(--ot-blue-700), var(--ot-blue-500));
	border-bottom: none;
}

.pTitle {
	color: #ffffff;
	background: linear-gradient(90deg, var(--ot-blue-700), var(--ot-blue-500));
}

.b1 { background: #ffffff; }
.b2 { background: #f1f8fe; }
.b3 { background: #ffffff; }

/* --------------------------- AVISOS ------------------------------ */

.errors {
	margin: 0 0 14px 0;
}

.errors ul,
.errors div {
	margin: 6px 0;
	padding: 11px 14px;
	border-radius: 10px;
	font-size: 13px;
	color: #7a1f1f;
	background: #fdecec;
	border: 1px solid #f5b9b9;
	border-left: 5px solid var(--ot-red);
}

.errors:empty { display: none; }

.captchaImage {
	position: relative;
	right: 0;
	top: 0;
	margin: 6px 0;
	border-radius: 8px;
	border: 1px solid rgba(23, 85, 143, 0.25);
}

.loader {
	margin-left: 10px;
	color: var(--ot-muted);
	font-size: 12px;
}

/* ------------------------- COPYRIGHT ---------------------------- */

.copyrights {
	margin-top: 20px;
	padding: 14px;
	border-radius: 12px;
	font-size: 12px;
	color: #bcdcf2;
	text-align: center;
	background: linear-gradient(180deg, rgba(11, 43, 77, 0.85), rgba(4, 16, 31, 0.85));
	border: 1px solid rgba(116, 189, 240, 0.22);
}

.copyrights small { color: #7fa8c6; }

/* ========================== RESPONSIVO =========================== */

@media (max-width: 1040px) {
	.layout { grid-template-columns: minmax(0, 1fr) 214px; }
	.col-left { grid-column: 1 / -1; }
	.col-left .panel { max-width: 440px; }
	.header { height: 196px; }
	.ot-logo__main { font-size: 58px; }
	.ot-logo__sub { font-size: 19px; letter-spacing: 9px; text-indent: 9px; }
	.ot-logo__world { font-size: 13px; padding: 6px 18px; margin-top: 6px; }
}

@media (max-width: 760px) {
	.mainbody { padding: 0 10px; }
	.layout { grid-template-columns: minmax(0, 1fr); }
	.header { height: 160px; }
	.dex { height: 92px; width: 92px; }
	.ot-logo__main { font-size: 44px; }
	.ot-logo__sub { font-size: 15px; letter-spacing: 7px; text-indent: 7px; }
	.ot-logo__world { font-size: 11px; padding: 5px 14px; gap: 7px; margin-top: 5px; }
	.ot-logo__flag { width: 17px; height: 12px; }
	.ot-logo__flag::after { width: 6px; height: 6px; }
	.navbar { gap: 5px; padding: 8px; }
	.navbar_link { padding: 7px 11px; font-size: 12px; }
	.newscont { padding: 13px; }
	.col-left .panel { max-width: none; }
	.panel-title { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.dex,
	.ot-logo__main,
	.ot-logo__sub { animation: none; }
	.navbar_link,
	.panel-links a,
	.loginform input.loginbutton { transition: none; }
}
.panel-links .otp-logout-form { margin: 0; padding: 0; }
.panel-links .otp-logout-button { background: transparent; width: 100%; box-sizing: border-box; text-align: left; font: inherit; cursor: pointer; }

.navbar.universe-navbar { position:relative; display:block; min-height:80px; box-sizing:border-box; padding:14px 220px 10px 16px; background:#2d3174; border:0; border-radius:16px; overflow:hidden; box-shadow:0 5px 16px #071d4140; }
.universe-navbar-links { position:relative; z-index:2; display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; width:fit-content; padding-bottom:9px; border-bottom:1px solid #54b5e8; }
.universe-navbar .navbar_link { padding:0; margin:0; border:0; border-radius:0; background:none; box-shadow:none; font-weight:400; font-size:14px; line-height:20px; letter-spacing:0; color:#fff; text-shadow:none; }
.universe-navbar a { display:inline-flex; align-items:center; text-decoration:none; }
.universe-navbar .navbar_link::after { content:''; display:inline-block; width:11px; height:11px; box-sizing:border-box; margin-left:9px; border:2px solid #53b7ef; border-radius:50%; vertical-align:-1px; background:linear-gradient(#53b7ef 50%, transparent 50%); }
.universe-navbar a:last-child .navbar_link::after { display:none; }
.universe-navbar a:hover .navbar_link, .universe-navbar .navbar_link:hover { color:#ffdd42; background:none; border:0; transform:none; box-shadow:none; text-shadow:none; }
.universe-navbar a:focus-visible { outline:2px solid #ffdd42; outline-offset:4px; }
.universe-navbar-note { position:relative; z-index:2; margin-top:5px; font-size:11px; line-height:15px; color:#e6e9ff; }
.universe-navbar-note::before { content:''; display:inline-block; width:7px; height:7px; background:#ffe13b; border-radius:50%; margin-right:7px; }
.universe-navbar-pokemon { position:absolute; pointer-events:none; right:0; top:0; width:205px; height:100%; background:#ffe338; border-radius:100% 0 0 0; }
.universe-navbar-pokemon::after { content:''; position:absolute; right:3px; top:-67px; width:190px; height:190px; background:url('../images/dex/pikachu.gif') center / contain no-repeat; }
@media (max-width:1000px) { .navbar.universe-navbar { padding-right:185px; } .universe-navbar-pokemon { width:170px; } }
@media (max-width:650px) { .navbar.universe-navbar { padding:13px 15px; } .universe-navbar-pokemon { display:none; } .universe-navbar .navbar_link { font-size:13px; } .universe-navbar-links { gap:8px; } }
.universe-navbar-pokemon::after { right:-195px; top:-310px; width:600px; height:600px; }
.universe-navbar-pokemon::after { top:-355px; }
.universe-navbar-pokemon { width:300px; background:transparent url("../images/universe/pikachu-menu-2d.svg?v=6") right center / 300px 80px no-repeat; border-radius:0; } .universe-navbar-pokemon::after { display:none; } .navbar.universe-navbar { padding-right:315px; } @media(max-width:1000px) { .navbar.universe-navbar { padding-right:220px; } .universe-navbar-pokemon { width:205px; background-size:260px 80px; } } @media(max-width:650px) { .navbar.universe-navbar { padding-right:15px; } }