/* Importando uma fonte limpa e moderna */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700&display=swap');

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    height: 100%;
}

/* Header escuro */
.top-header {
    background-color: #122b5e; /* Azul escuro da navbar */
    font-size: 0.9rem;
}

/* NOVO: Estilos para as imagens do Logo */

.header-logo {
    height: 30px; 
    width: auto;
    transition: height 0.3s ease; /* Cria uma animação suave ao encolher */
}

.footer-logo {
    height: 25px; /* Ajuste a altura conforme necessário */
    width: auto;
    opacity: 0/.0; /* Mantém a opacidade suave do original */
}

.social-icons a {
    color: white;
    transition: opacity 0.2s;
}

.social-icons a:hover {
    opacity: 0.7;
}

.btn-atendimento {
    background-color: #1a4fa3;
    border: none;
}

.btn-atendimento:hover {
    background-color: #16438a;
}

.btn-email {
    background-color: #1a4fa3;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-email:hover {
    background-color: #16438a;
}

/* NOVO: Fundo Principal com Imagem */
.main-content {
    min-height: calc(100vh - 70px); /* 100% da altura menos a navbar */
    /* Substituído degradê por imagem */
    background-image: url('https://clientes-novo.tecnospeed.com.br/login-bg.jpg');
    background-size: cover; /* Garante que a imagem cubra toda a área */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat;
    padding: 3rem 1rem;
    position: relative;
}



/* Card de Login */
.login-card {
    width: 100%;
    max-width: 500px;
}

.form-label {
    font-size: 0.9rem;
    color: #4a4a4a !important;
}

.form-control {
    border-color: #e0e0e0;
}

.form-control:focus {
    border-color: #0d5aa7;
    box-shadow: 0 0 0 0.25rem rgba(13, 90, 167, 0.25);
}

.btn-entrar {
    background-color: #0d468e;
    border: none;
}

.btn-entrar:hover {
    background-color: #0a3875;
}

.forgot-password {
    color: #0d5aa7;
    font-size: 0.9rem;
}

.forgot-password:hover {
    text-decoration: underline !important;
    color: #0a3875;
}

/* Botão Flutuante (FAB) */
.fab-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: white;
    color: #0d468e;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    z-index: 1000;
}

.fab-btn:hover {
    transform: scale(1.05);
}


/* Estilo base do telefone */
.phone-text {
    font-size: 0.9rem;
    white-space: nowrap; /* Evita que o número de telefone quebre em duas linhas */
}

/* ==================================================
   Media Queries (Responsividade em Cascata)
   ================================================== */

/* 1. Primeira Quebra: Oculta apenas o texto do E-mail */
@media (max-width: 1150px) {
    .email-text {
        display: none !important;
    }
    /* Tira a margem do ícone para ele ficar centralizado no botão */
    .btn-email i {
        margin: 0 !important; 
    }
}

/* 2. Segunda Quebra: Oculta também o texto do Atendimento */
@media (max-width: 950px) {
    .atendimento-text {
        display: none !important;
    }
    /* Tira a margem do ícone para ele ficar centralizado no botão */
    .btn-atendimento i {
        margin: 0 !important; 
    }
}

/* 3. Ajustes para Tablets menores e Celulares Deitados */
@media (max-width: 768px) {
    .header-logo {
        height: 20px; 
    }
    .phone-text {
        font-size: 0.75rem; 
    }
}

/* 4. Ajustes para Celulares em Pé (Telas estreitas) */
@media (max-width: 480px) {
    .header-logo {
        height: 16px;
    }
    .phone-text {
        font-size: 0.65rem;
    }
    /* Diminui o botão em si para caber tudo na tela */
    .btn-atendimento, .btn-email {
        padding: 0.4rem 0.6rem !important;
    }
}

/* ==================================================
   Media Queries (Responsividade em Cascata)
   ================================================== */

/* 1. Primeira Quebra: Oculta apenas o texto do E-mail */
@media (max-width: 1150px) {
    .email-text {
        display: none !important;
    }
    .btn-email i {
        margin: 0 !important; 
    }
}

/* 2. Segunda Quebra: Oculta também o texto do Atendimento */
@media (max-width: 950px) {
    .atendimento-text {
        display: none !important;
    }
    .btn-atendimento i {
        margin: 0 !important; 
    }
}

/* 3. TERCEIRA QUEBRA: Reorganiza os números de telefone em celulares */
@media (max-width: 680px) {
    .telefone-texto {
        /* Permite que o texto quebre para a linha de baixo (sobrescreve o text-nowrap) */
        white-space: normal !important; 
        
        /* Limita a largura para forçar o texto a se amassar em 3 linhas */
        max-width: 75px; 
        
        /* Ajustes de fonte e espaçamento para ficar igual à sua imagem */
        font-size: 0.65rem !important; 
        line-height: 1.2; /* Deixa as linhas bem coladinhas umas nas outras */
        display: inline-block;
        text-align: center;
    }
    
    /* Alinha o ícone no centro em relação às 3 linhas de texto */
    .phone-wrapper {
        align-items: center !important;
    }
}