/* Fundo e Centralização com Respiro para Celulares */
body {
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 20px; /* Garante o afastamento lateral em smartphones */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

/* Janela de Login Quadrada e Responsiva */
.login-container {
    width: 90%;           /* Ocupa 90% da largura em telas pequenas */
    max-width: 350px;      /* Não ultrapassa 350px em telas grandes */
    padding: 40px;
    background-color: #ffffff;
    border: 2px solid #add8e6; /* Azul claro */
    border-radius: 15px;      /* Bordas arredondadas */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-align: center;
    box-sizing: border-box;
}

h2 {
    color: #333;
    margin-bottom: 25px;
    font-weight: 600;
}

/* Campos de Entrada com Efeitos Visuais */
input {
    width: 100%;
    padding: 14px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 16px; /* Ideal para evitar zoom no iPhone */
    transition: all 0.3s ease; /* Suaviza a mudança de cor e sombra */
    outline: none;
}

/* Efeito ao passar o mouse (Hover) e ao clicar (Focus) */
input:hover {
    border-color: #add8e6;
}

input:focus {
    border-color: #87ceeb;
    box-shadow: 0 0 8px rgba(173, 216, 230, 0.5); /* Brilho azul claro ao clicar */
    background-color: #faffff;
}

/* Botão Estilizado */
button {
    width: 100%;
    padding: 12px;
    background-color: #add8e6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    color: #444;
    font-size: 16px;
    margin-top: 15px;
    transition: background 0.3s ease, transform 0.1s ease;
}

button:hover {
    background-color: #87ceeb;
    color: #000;
}

button:active {
    transform: scale(0.98); /* Efeito de clique (afunda levemente) */
}