/*MENU STYLE - BLUE THEME*/
.navContent {
display: none;
flex-direction: row;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
border-radius: 12px;
background-color: #0a1929;
background: radial-gradient(circle at 90% 90%, rgba(15, 38, 61, 1) 0%, rgba(10, 25, 41, 1) 60%, rgba(5, 12, 20, 1) 40%);
border: 1px solid rgba(33, 150, 243, 0.2);
gap: 50px;
padding: 50px;
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(33, 150, 243, 0.1);
z-index: 99;
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;}

.navContent.menu-open {
opacity: 1;
transform: translate(-50%, -50%) scale(1);}

.navContent span {
font-family: 'DM Sans', sans-serif;
color: #fff;
margin: -20px 0 -10px;
font-size: 0.79rem;
letter-spacing: 0.03em;
text-align: center;}

.navContent ul {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 15px;
text-align: center;
padding: 0;
margin: 0;}

.navContent li {
display: flex;
cursor: pointer;
justify-content: center;
width: 100px;}

.navContent i {
font-size: 2rem;}

.navContent img {
padding: 10px;
border-radius: 8px;
height: 80px;
background: #0d2b3e;
border: 1px solid rgba(33, 150, 243, 0.15);
box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 16px;
transition: transform 0.25s ease, background 0.2s ease, box-shadow 0.2s ease;
display: block;}

.lastAcesso {
font-family: 14px/1.4 "Inter", "Segoe UI", Roboto, Arial, sans-serif;
display: flex;
justify-content:flex-end;
align-items: center;
font-size: 0.9rem;
background: #000010;
color: #a5b0b8;
padding: 18px;}

.buttonSair {
color: #a5b0b8;}

.buttonSair:hover {
color: #FDD5D5;}

li img:hover {
transform: scale(1.12);
background: #1565c0;
box-shadow: 0 0 12px rgba(33, 150, 243, 0.4);}

a {
text-decoration: none;
color: #e3f2fd;
padding-bottom: 15px;}

/* --- Botão fechar (✕) dentro do menu --- */
.nav-close-btn {
position: absolute;
top: 12px;
right: 14px;
background: none;
border: none;
color: #64b5f6;
font-size: 20px;
cursor: pointer;
line-height: 1;
padding: 5px 9px;
border-radius: 6px;
transition: color 0.2s, background 0.2s;
z-index: 10;}

.nav-close-btn:hover {
color: #90caf9;
background: rgba(33, 150, 243, 0.1);}

/* --- Overlay escurecido ao fundo --- */
.nav-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 98;
opacity: 0;
transition: opacity 0.25s ease;}

.nav-backdrop.menu-open {
opacity: 1;}

/* --- Botão flutuante (FAB) para reabrir --- */
.fab-menu {
position: fixed;
bottom: 28px;
right: 28px;
width: 50px;
height: 50px;
border-radius: 50%;
background: #0d47a1;
border: 1px solid rgba(33, 150, 243, 0.3);
color: #e3f2fd;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(33, 150, 243, 0.2);
z-index: 97;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.15s, opacity 0.3s, box-shadow 0.2s;
opacity: 1;}

.fab-menu:hover {
background: #1565c0;
transform: scale(1.08);
box-shadow: 0 6px 24px rgba(33, 150, 243, 0.4);}

.fab-menu.hidden {
opacity: 0;
pointer-events: none;
transform: scale(0.85);}

.fab-menu .fab-icon {
display: flex;
flex-direction: column;
gap: 4px;
width: 18px;}

.fab-menu .fab-icon span {
display: block;
height: 2px;
background: #64b5f6;
border-radius: 2px;
transition: width 0.2s;}

.fab-menu .fab-icon span:nth-child(2) {
width: 70%;}

/* reset & base */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;}

body {
background: #0a1929;
font-family: 'DM Sans', sans-serif;
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;}


/* loading screen */
.loading-screen {
position: fixed;
inset: 0;
background: #0a1929;
display: flex;
justify-content: center;
align-items: center;
color: #90caf9;
font-family: 'DM Mono', monospace;
font-size: 0.8rem;
letter-spacing: 0.2em;
z-index: 1000;
transition: opacity 0.5s;}

/* painel central */
.panel img {
height: 120px;}

.panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
max-width: 86vw;
z-index: 20;
color: #e3f2fd;
text-align: center;
opacity: 0;
animation: fadeInUp 0.9s 1s ease forwards;}

@keyframes fadeInUp {0% {
opacity: 0;
transform: translate(-50%, calc(-50% + 24px));}
100% {
opacity: 1;
transform: translate(-50%, -50%);}}

.logo {
font-family: 'DM Mono', monospace;
font-size: 0.8rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #90caf9;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 6px;}

.logo-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #2196f3;
box-shadow: 0 0 12px rgba(33, 150, 243, 0.8);
animation: pulseGlow 2.2s infinite alternate;
flex-shrink: 0;}

.userClass {
background: #0d47a1;
border: 1px solid rgba(33, 150, 243, 0.3);
padding: 1px 7px;
border-radius: 4px;
color: #bbdefb;}

@keyframes pulseGlow {
0% { box-shadow: 0 0 5px #2196f3; opacity: 0.6;}
100% { box-shadow: 0 0 16px #42a5f5; opacity: 1;}}

h1 {
font-size: 2.2rem;
font-weight: 300;
color: #e3f2fd;
line-height: 1.2;
margin-bottom: 8px;
letter-spacing: -0.02em;}

.sub {
font-size: 0.85rem;
color: #90caf9;
margin-bottom: 36px;}

input {
display: block;
width: 100%;
margin-bottom: 12px;
background: rgba(13, 71, 161, 0.3);
border: 1px solid rgba(33, 150, 243, 0.2);
border-radius: 10px;
padding: 12px 16px;
font-family: 'DM Sans', sans-serif;
font-size: 0.9rem;
color: #e3f2fd;
outline: none;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;}

input::placeholder {
color: #64b5f6;}

input:focus {
border-color: #42a5f5;
background: rgba(33, 150, 243, 0.1);
box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15);}

.btn {
width: 100%;
margin-top: 8px;
padding: 12px 16px;
border: none;
border-radius: 10px;
background: #1976d2;
color: white;
font-family: 'DM Sans', sans-serif;
font-size: 0.95rem;
font-weight: 500;
cursor: pointer;
letter-spacing: 0.03em;
transition: background 0.2s, transform 0.1s, box-shadow 0.2s;}

.btn:hover {
background: #2196f3;
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(33, 150, 243, 0.3);}

.btn:active {
transform: translateY(0);}

.corner {
position: fixed;
bottom: 22px;
left: 28px;
font-family: 'DM Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.2em;
color: #1565c0;
z-index: 15;
text-transform: uppercase;}

.contentcorner {
display: flex;
align-items: center;}

.globe-mask-hint {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 35%;
background: transparent;
z-index: 5;
pointer-events: none;}

.panel::before {
content: '';
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: rgba(33, 150, 243, 0.4);
border-radius: 2px;}

/* disabled */
.disabledCss {
position: relative;
display: inline-block;
pointer-events: none;}

.disabledCss::after {
content: "🔒";
filter: grayscale(100%);
font-size: 30px;
position: absolute;
border: 1px solid #1565c0;
top: 0;
right: 0;
background: #0a1929;
padding: 3px;
margin: 2px;
border-radius: 50%;}

.disabledSpan {
opacity: 0.4;}

/* nav toggle button */
.menu button {
background: none;
border: none;
cursor: pointer;
padding: 6px;}

.menu button img {
height: 28px;
display: block;}




.menu button {transition: transform 0.9s ease;}
.menu button:hover {transform: rotate(90deg);}


nav {
position: fixed;
top: 10px;
left: 24px;
z-index: 200;
display: flex;
align-items: center;
gap: 12px;}

.menu {
display: flex;
align-items: center;
gap: 10px;}

.menu span {
font-family: 'DM Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.15em;
color: #64b5f6;
text-transform: uppercase;}