/* ===================================================== */
/* FUNDO DA TELA INTEIRA — COR #eaeef7 */
/* ===================================================== */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #eaeef7; /* ✅ COR QUE VOCÊ ADICIONOU */
}

/* ===================================================== */
/* TÍTULO E SUBTÍTULO — VISUAL PROFISSIONAL */
/* ===================================================== */
.boas-vindas {
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
    padding: 0 10px;
    box-sizing: border-box;
}

.boas-vindas h1 {
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: 26px;
    font-weight: 600;           /* ✅ Semi-negrito — elegante sem ser grosso */
    color: #2c3e50;             /* ✅ Azul-escuro suave — mais profissional que preto */
    margin: 0 0 10px 0;
    padding: 0;
    letter-spacing: 0.5px;      /* ✅ Espaçamento leve entre letras */
    line-height: 1.3;
}

.boas-vindas p {
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #546577;             /* ✅ Cinza-azulado suave — contraste suave */
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* ===================================================== */
/* CONTAINER — 50% | 50% — MESMA ALTURA NAS DUAS DIVS */
/* ===================================================== */
#container-meio-a-meio {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch; /* ✅ AS DUAS DIVS SEMPRE MESMA ALTURA */
    margin: 0;
    padding: 0;
}

/* ===== LADO ESQUERDO — IMAGEM NO TOPO, À DIREITA, SE ADAPTA SEM CORTAR ===== */
#lado-esquerdo {
    width: 50%;
    flex: 0 0 50%;
    height: 100%;
    
    display: flex;
    align-items: flex-start;       /* ✅ Imagem no TOPO */
    justify-content: flex-end;      /* ✅ Imagem BEM encostada na BORDA DIREITA */
    
    padding-top: 5px;              /* ✅ Pequeno respiro do topo */
    padding-right: 0;              /* ✅ Colada na borda direita */
    overflow: hidden;
    margin: 0;
    
    /* ✅ SOMBRA SUAVE na borda direita */
    box-shadow: inset -8px 0 15px -10px rgba(0, 0, 0, 0.08);
}

#lado-esquerdo img {
    width: 92%;                    /* ✅ Largura proporcional */
    height: auto;                  /* ✅ Altura se adapta SOZINHO */
    max-width: 100%;               /* ✅ NUNCA ultrapassa a div */
    max-height: 85vh;              /* ✅ LIMITE: não passa de 85% da tela */
    object-fit: contain;           /* ✅ IMAGEM INTEIRA SEM CORTAR — SEMPRE VISÍVEL! */
    object-position: top right;    /* ✅ CANTO SUPERIOR DIREITO */
    display: block;
}

/* ===== LADO DIREITO — CANTOS ARREDONDADOS APENAS LADO DIREITO ===== */
#lado-direito {
    width: 50%;
    flex: 0 0 50%;
    height: 100%;
    
    background-color: #ffffff;
    
    padding: 15px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    box-sizing: border-box;
    margin: 0;
    
    /* ✅ ARREDONDA APENAS CANTO SUPERIOR E INFERIOR DA DIREITA */
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* ===================================================== */
/* CONTAINER PAI — PERMITE IMAGENS LADO A LADO */
/* ===================================================== */
#container-empresas {
    width: 100%;
    display: flex;
    flex-wrap: wrap;            /* ✅ Fica lado a lado ENQUANTO COUBER, quebra só quando precisar */
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px 18px;            /* ✅ ESPAÇAMENTO entre as imagens (vertical e horizontal) */
    padding: 10px;
    box-sizing: border-box;
}

/* ===================================================== */
/* CONTAINER PAI — OBRIGATÓRIO! Permite lado a lado */
/* ===================================================== */
#container-empresas {
    width: 100%;
    display: flex;              /* ✅ Coloca tudo LADO A LADO */
    flex-wrap: wrap;            /* ✅ Quebra para baixo quando NÃO couber mais */
    align-items: flex-start;
    justify-content: flex-start;
    gap: 18px 20px;            /* ✅ ESPAÇAMENTO: linha 18px | coluna 20px */
    padding: 10px;
    box-sizing: border-box;
}

/* ===================================================== */
/* CONTAINER PAI DAS EMPRESAS — SEMPRE VISÍVEIS */
/* ===================================================== */
#container-empresas {
    width: 100%;
    display: flex;
    flex-wrap: wrap;            /* ✅ Lado a lado, quebra quando não couber */
    align-items: flex-start;
    justify-content: center;    /* ✅ Centraliza as imagens na div direita */
    gap: 15px 18px;            /* ✅ Espaçamento: entre linhas | entre colunas */
    padding: 15px 10px;
    box-sizing: border-box;
    
    /* ✅ PERMITE ROLAGEM — NÃO DEIXA IMAGENS SUMIREM! */
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 180px); /* ✅ Limite inteligente: deixa espaço pro título */
}

/* ===================================================== */
/* DIV DA IMAGEM — TAMANHO JUSTO */
/* ===================================================== */
#selecionaempresa {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* LINK E IMAGEM */
.selecionardirecionar {
    display: block;
    text-decoration: none;
}

.img-selecionar-empresa {
    width: 100% !important;
    height: auto !important;
    max-width: 100px;          /* ✅ Tamanho controlado */
    max-height: 75px;          /* ✅ Altura uniforme */
    object-fit: contain;
    display: block;
    
    /* ✅ SOMBRA BONITA EM VOLTA */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    
    transition: transform 0.2s ease;
}

.img-selecionar-empresa:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.18);
}

/* ===================================================== */
/* CORRIGE A DIV DIREITA — PERMITE ROLAGEM SEM CORTAR */
/* ===================================================== */
#lado-direito {
    width: 50%;
    flex: 0 0 50%;
    height: 100%;
    background-color: #ffffff;
    
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* ✅ Conteúdo começa no topo */
    
    /* ✅ ROLAGEM SUAVE — TUDO APARECE! */
    overflow-y: auto;
    overflow-x: hidden;
    
    box-sizing: border-box;
    margin: 0;
    
    /* ✅ Cantos arredondados apenas lado direito */
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* ===================================================== */
/* 📱 AJUSTE PARA TELAS MENORES */
/* ===================================================== */
@media (max-width: 700px) {
    .img-selecionar-empresa {
        max-width: 90px;
        max-height: 65px;
    }
    #container-empresas {
        gap: 12px 15px;
        max-height: calc(100vh - 160px);
    }
}

/*---------------------------------------------------------------------------------------*/

/* ===================================================== */
/* ÁREA DE LOGIN — LAYOUT PROFISSIONAL E RESPONSIVO */
/* ===================================================== */
.login-container {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

/* LOGO DA EMPRESA */
.login-logo {
    margin-bottom: 10px;
}
.login-logo img {
    max-width: 120px;
    height: auto;
}

/* NOME DA EMPRESA */
.login-empresa {
    font-family: 'Segoe UI', Roboto, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eef7;
}

/* MENSAGEM DE BEM-VINDO */
.msg-bemvindos {
    display: block;
    font-family: 'Segoe UI', Roboto, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
}

/* CAIXA DE ERRO */
#msg-erro {
    color: #c0392b;
    font-size: 14px;
    margin: 0 0 15px 0;
    padding: 8px;
    background-color: #fdecea;
    border-radius: 6px;
}

/* ===================================================== */
/* CAMPOS DE TEXTO — LARGOS E COM BORDA #cee3f4 */
/* ===================================================== */
.form-login,
.form-senha {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
    margin-bottom: 15px;
    
    font-family: 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    
    border: 2px solid #cee3f4; /* ✅ COR DA BORDA QUE PEDIU */
    border-radius: 10px;        /* ✅ Cantos arredondados suaves */
    background-color: #fafcfe;
    outline: none;
    
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* EFEITO AO CLICAR NO CAMPO */
.form-login:focus,
.form-senha:focus {
    border-color: #94bde8;
    box-shadow: 0 0 0 3px rgba(148, 189, 232, 0.15);
    background-color: #ffffff;
}

/* CAMPO SENHA + ÍCONE OLHO */
.senha-wrapper {
    position: relative;
    width: 100%;
}
.senha-wrapper .form-senha {
    padding-right: 45px;
    margin-bottom: 0;
}
.senha-wrapper img#olho {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: auto;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.senha-wrapper img#olho:hover {
    opacity: 1;
}

/* ===================================================== */
/* LINK ESQUECEU SENHA — ABAIXO DOS CAMPOS */
/* ===================================================== */
.link-esqueci-senha {
    text-align: right;
    margin: 8px 0 20px 0;
}
.esqueceusenha {
    font-family: 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: #347ab8;
    text-decoration: none;
    transition: color 0.2s;
}
.esqueceusenha:hover {
    color: #1e5a90;
    text-decoration: underline;
}

/* ===================================================== */
/* BOTÃO ENTRAR */
/* ===================================================== */
.bt-logar {
    width: 100%;
    padding: 13px;
    font-family: 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #4a90d9, #347ab8);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.bt-logar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 122, 184, 0.3);
}
.bt-logar:active {
    transform: translateY(0);
}

/* ===================================================== */
/* 📱 RESPONSIVIDADE — SE ADAPTA A QUALQUER TELA */
/* ===================================================== */
@media (max-width: 480px) {
    .login-container {
        padding: 15px;
    }
    .msg-bemvindos {
        font-size: 20px;
    }
    .form-login,
    .form-senha {
        padding: 11px 15px;
        font-size: 14px;
    }
    .bt-logar {
        padding: 12px;
        font-size: 15px;
    }
}