/*fonte */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');

/* ===== BLOQUEIO DE ZOOM E SELEÇÃO ===== */
* {
    user-select: none; /* Bloqueia seleção de texto */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none; /* iOS */
    -webkit-tap-highlight-color: transparent; /* Remove highlight no toque */
    zoom: 1; /* Define zoom fixo */
}

/* Permitir seleção apenas em campos de input */
input, textarea, select {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

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

        /* Estilização geral do body e html */
        body, html {
            min-height: 100vh; /* Altura mínima da tela toda */
            margin: 0; /* Remove as margens padrão */
            padding: 0; /* Remove os espaçamentos padrão */
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /* Fonte padrão */
            color: #fff; /* Cor do texto */
            /* Fundo com padrão xadrez em diagonais */
            background: repeating-linear-gradient(
                45deg,
                #3b3b3b 0px,
                #3b3b3b 40px,
                #5a5959 40px,
                #5a5959 80px
            ), repeating-linear-gradient(
                -45deg,
                #3b3b3b 0px,
                #3b3b3b 40px,
                #2d2d2d 40px,
                #2d2d2d 80px
            );
        }

        /* Barra superior fixa */
        .topbar {
            width: 100vw; /* Ocupa toda largura */
            position: fixed; /* Fixa no topo */
            top: 0;
            left: 0;
            height: 70px; /* Altura da barra */
            background: rgba(30,30,30,0.85); /* Fundo transparente */
            display: flex; /* Flexbox */
            align-items: center; /* Alinha verticalmente */
            justify-content: space-between; /* Espaço entre elementos */
            z-index: 1000; /* Fica sobre os outros elementos */
            box-shadow: 0 2px 12px rgba(0,0,0,0.18); /* Sombra */
            backdrop-filter: blur(2px); /* Efeito vidro */
        }

        /* Área logo dentro da topbar */
        .topbar-logo {
            display: flex;
            align-items: center;
            gap: 16px; /* Espaço entre logo e nome */
            margin-left: 32px;
            cursor: pointer;
        }

        /* Espaço à direita dos ícones da topbar */
        .topbar-icons {
            display: flex;
            align-items: center;
            gap: 0;
            margin-right: 42px;
        }

        /* Imagem do logo */
        .topbar-logo img {
            height: 48px;
            width: 48px;
            border-radius: 50%; /* Forma circular */
            background: #fff;
            object-fit: cover; /* Ajusta a imagem */
            box-shadow: 0 2px 8px rgba(0,0,0,0.18);
            filter: brightness(1) contrast(1) saturate(1);
            /* Força cores normais da logo - corrige inversão */
        }

        /* Texto do nome na logo */
        .topbar-logo .nome {
            font-size: 2rem;
          font-weight: bold;
          color: #f25d52;
          letter-spacing: 2px;
          text-shadow: 0 2px 8px #000;
        }

        @media (max-width: 600px) {
            .topbar { height: 56px; }
            .topbar-logo img { height: 32px; width: 32px; }
            .topbar-logo .nome { font-size: 1.2rem; }
        }
        /* ===== BOTÃO VOLTAR PADRONIZADO ===== */
        .btn-voltar-padrao {
            color: #f25d52;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 10px;
            border-radius: 50%;
            background: rgba(242, 93, 82, 0.1);
            transition: all 0.3s ease;
            margin-right: 20px;
        }
        
        .btn-voltar-padrao:hover {
            background: rgba(242, 93, 82, 0.2);
            transform: scale(1.1);
        }
        
        .btn-voltar-padrao:active {
            transform: scale(0.95);
        }
        
        /* Botão voltar antigo (manter compatibilidade) */
        .btn-voltar {
            margin-right: 32px;
            background: #222;
            color: #f25d52;
            border: 2px solid #f25d52;
            border-radius: 50%;
            width: 38px;
            height: 38px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 2px 8px #000;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, color 0.2s;
            z-index: 1101;
        }
        .btn-voltar:hover {
            background: #f25d52;
            color: #fff;
            border-color: #bb1a1a;
        }
        @media (max-width: 700px) {
            .btn-voltar { width: 32px; height: 32px; font-size: 1rem; margin-right: 8px; }
            .btn-voltar-padrao { font-size: 1.3rem; margin-right: 10px; }
        }
        /* ===== PERFIL DO USUÁRIO NO TOPBAR (PADRÃO) ===== */
        .topbar-user-section {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-right: 20px;
        }
        
        .user-profile {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 8px 15px;
            border-radius: 25px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .user-profile:hover {
            background: rgba(242, 93, 82, 0.2);
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(242, 93, 82, 0.3);
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #f25d52;
            background: linear-gradient(135deg, #f25d52, #ff6b4a);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1rem;
        }
        
        .user-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .user-greeting {
            color: #fff;
            font-size: 1rem;
            font-weight: 500;
            white-space: nowrap;
        }
        
        @media (max-width: 768px) {
            .user-greeting {
                display: none;
            }
            .user-profile {
                padding: 6px 8px;
            }
            .user-avatar {
                width: 32px;
                height: 32px;
                font-size: 0.9rem;
            }
            .topbar-user-section {
                gap: 10px;
                margin-right: 10px;
            }
        }
        
        .btn-sair {
            position: absolute;
            top: 18px;
            right: 18px;
            background: #222;
            color: #f25d52;
            border: 2px solid #f25d52;
            border-radius: 50%;
            width: 38px;
            height: 38px;
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .btn-sair:hover {
            background: #f25d52;
            color: #fff;
        }
         @media (max-width: 600px) {
            .btn-sair { top: 8px; right: 8px; width: 32px; height: 32px; font-size: 1.1rem; }
        }
        /* ===================== PÁGINA DE LOGIN ===================== */
         .login-topbar {
            width: 100vw;
            position: fixed;
            top: 0;
            left: 0;
            height: 70px;
            background: rgba(30,30,30,0.85);
            display: flex;
            align-items: center;
            justify-content: flex-start;
            z-index: 1000;
            box-shadow: 0 2px 12px rgba(0,0,0,0.18);
            backdrop-filter: blur(2px);
            padding-left: 32px;
        }
        .login-topbar-logo {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .login-topbar-logo img {
            height: 48px;
            width: 48px;
            border-radius: 50%;
            background: #fff;
            object-fit: cover;
            box-shadow: 0 2px 8px rgba(0,0,0,0.18);
            filter: brightness(1) contrast(1) saturate(1);
            /* Força cores normais da logo - corrige inversão */
        }
        .login-topbar-logo .nome {
            font-size: 2rem;
            font-weight: bold;
            color: #f25d52;
            letter-spacing: 2px;
            text-shadow: 0 2px 8px #000;
            }
        .login-container-main {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 90px;
        }
        .login-box {
            background: rgba(40,40,40,0.92);
            border-radius: 28px;
            width: 420px;
            max-width: 95vw;
            min-height: 420px;
            padding: 56px 40px 40px 40px;
            text-align: center;
            box-shadow: 0 8px 32px rgba(0,0,0,0.22);
            border: 3px solid #f25d52;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            margin: 0 auto;
        }
        .login-box img {
            width: 110px;
            height: 110px;
            object-fit: contain;
            margin-bottom: 18px;
            border-radius: 18px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.10);
        }
        .login-box h1 {
            font-size: 2.1rem;
            font-family: 'Orbitron', 'Arial Narrow', Arial, sans-serif;
            color: #f25d52;
            font-weight: 800;
            margin-bottom: 18px;
            letter-spacing: 2px;
            text-shadow: 0 2px 8px #000;
        }
        .login-box input[type="text"],
        .login-box input[type="password"] {
            font-size: 1.1rem;
            padding: 12px 18px;
            border-radius: 14px;
            width: 100%;
            box-sizing: border-box;
            margin: 10px 0;
            border: 1px solid #f25d52;
            background: #333;
            color: #fff;
            outline: none;
            box-shadow: 0 2px 8px #000, 0 1px 6px #f25d52;
        }
        .login-box input[type="text"]:focus,
        .login-box input[type="password"]:focus {
            border-color: #bb1a1a;
            box-shadow: 0 0 5px #f25d52;
        }
        .login-box input::placeholder {
            color: #bbb;
        }
        .login-box .btn,
        .login-box .btn-voltar {
            font-size: 1rem;
            padding: 10px 10px;
            border-radius: 14px;
            width: 100%;
            box-sizing: border-box;
            background: #f25d52;
            color: #fff;
            font-family: 'Orbitron', 'Arial Narrow', Arial, sans-serif;
            font-weight: bold;
            border: none;
            box-shadow: 0 2px 8px #000, 0 1px 6px #f25d52;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-top: 12px;
            transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
            cursor: pointer;
        }
        .login-box .btn-voltar {
            background: #222;
            border: 2px solid #f25d52;
            color: #fff;
        }
        .login-box .btn:hover,
        .login-box .btn-voltar:hover {
            background: #bb1a1a;
            transform: scale(1.04) translateY(-2px);
            box-shadow: 0 8px 32px #f25d52, 0 2px 12px #000;
        }
        .login-box .message {
            color: #ff6b6b;
            margin-top: 10px;
            font-size: 1.1rem;
            font-family: inherit;
            display: none;
        }
        .login-box .recuperar-btn {
                background: none;
                color: #bbb;
                font-size: 0.95rem;
                font-family: inherit;
                font-weight: normal;
                border: none;
                border-radius: 0;
                padding: 0;
                width: auto;
                margin-top: 8px;
                box-shadow: none;
                letter-spacing: normal;
                text-transform: none;
                transition: color 0.2s;
                cursor: pointer;
                position: absolute;
                right: 24px;
                bottom: 18px;
            }

            .login-box .recuperar-btn:hover {
                color: #f25d52;
                background: none;
                transform: none;
                box-shadow: none;
            }
        /* Modal recuperação de senha */
        #modalRecuperacao {
            display:none;
            position:fixed;
            top:0;left:0;
            width:100vw;height:100vh;
            background:rgba(0,0,0,0.25);
            z-index:1000;
            align-items:center;
            justify-content:center;
        }
        #modalRecuperacao .recuperacao-box {
            background: #222;
            padding: 32px 24px;
            border-radius: 18px;
            max-width: 350px;
            margin:auto;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            text-align:center;
            border: 2px solid #f25d52;
        }
        #modalRecuperacao h2 {
            color: #f25d52;
            margin-bottom: 18px;
            font-family: 'Orbitron', 'Arial Narrow', Arial, sans-serif;
            font-size: 1.5rem;
        }
        #modalRecuperacao input[type="email"],
        #modalRecuperacao input[type="password"] {
            font-size: 1.15rem;
            padding: 12px 18px;
            border-radius: 10px;
            width: 90%;
            margin: 12px 0;
            border: 1px solid #f25d52;
            background: #333;
            color: #fff;
            outline: none;
        }
        #modalRecuperacao button {
            font-size: 1.1rem;
            padding: 12px 18px;
            border-radius: 10px;
            width: 100%;
            margin-top: 8px;
            background: #f25d52;
            color: #fff;
            font-family: 'Orbitron', 'Arial Narrow', Arial, sans-serif;
            font-weight: bold;
            border: none;
            box-shadow: 0 2px 8px #000, 0 1px 6px #f25d52;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
            cursor: pointer;
        }
        #modalRecuperacao button:hover {
            background: #bb1a1a;
            transform: scale(1.04) translateY(-2px);
            box-shadow: 0 8px 32px #f25d52, 0 2px 12px #000;
        }
        #modalRecuperacao .recuperacao-msg {
            margin-top: 10px;
            color: #f25d52;
            font-size: 1rem;
        }
        @media (max-width: 600px) {
            .login-box {
                width: 98vw;
                min-height: 320px;
                padding: 24px 8px;
            }
            .login-box img {
                width: 70px;
                height: 70px;
            }
            .login-topbar-logo img {
                height: 32px;
                width: 32px;
            }
            .login-topbar-logo .nome {
                font-size: 1.2rem;
            }
        }

        /* ===== CORREÇÃO GLOBAL PARA LOGOS E FOTOS ===== */
        /* Força cores normais em todas as logos para evitar inversão */
        img[src*="logo-modo-claro.png"],
        img[src*="logo.png"],
        img[src*="logo-teste.png"] {
            filter: brightness(1) contrast(1) saturate(1) !important;
            /* Remove qualquer filtro de inversão aplicado pelo sistema */
            -webkit-filter: brightness(1) contrast(1) saturate(1) !important;
        }

        /* Força cores normais em fotos de perfil para evitar inversão */
        img[src*="fotos/perfil/"],
        .foto-perfil img,
        .user-photo img,
        .profile-photo img,
        .popup-avatar img {
            filter: brightness(1) contrast(1) saturate(1) !important;
            -webkit-filter: brightness(1) contrast(1) saturate(1) !important;
        }

        /* Correção específica para modo escuro que pode causar inversão */
        @media (prefers-color-scheme: dark) {
            img[src*="logo-modo-claro.png"],
            img[src*="fotos/perfil/"] {
                filter: brightness(1) contrast(1) saturate(1) invert(0) !important;
            }
        }