/* Cores de marca (cor-primaria, cor-borda, cor-formulario) vêm como custom
   properties injetadas inline no <body> pelo login.php, a partir da tabela
   `empresa`. O fundo da página fica neutro de propósito (padrão de referência). */
:root {
    --cor-primaria: #14b8a6;
    --cor-formulario: #ffffff;
    --cor-borda: #d7dbe0;
    --fundo-neutro: #f4f5f7;
    --texto: #1c2b33;
    --texto-suave: #6b7680;
    --texto-desabilitado: #9aa3ab;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    color: var(--texto);
    background: var(--fundo-neutro);
}

.tela {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.conteudo {
    width: 100%;
    max-width: 26rem;
}

/* ---------- Cabeçalho / marca ---------- */

.marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.marca-icone {
    flex-shrink: 0;
}

.marca-logo {
    height: 56px;
    width: auto;
    max-width: 14rem;
    object-fit: contain;
    flex-shrink: 0;
}

.marca-nome {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--texto);
    margin: 0;
    letter-spacing: -0.01em;
}

.marca-subtitulo {
    text-align: center;
    color: var(--texto-suave);
    font-size: 0.95rem;
    margin: 0 0 2.5rem;
}

.boas-vindas {
    text-align: center;
    color: var(--cor-primaria);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 2rem;
}

/* ---------- Formulário ---------- */

.erro {
    background: #fdecec;
    border: 1px solid #f3b8b8;
    color: #a02323;
    font-size: 0.9rem;
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1.5rem;
}

.campo {
    margin-bottom: 1.4rem;
}

.campo label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--texto);
}

.campo-input {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--cor-formulario);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo-input:focus-within {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-primaria) 18%, transparent);
}

.campo-input .icone-esquerda {
    display: flex;
    padding-left: 0.85rem;
    color: var(--texto-suave);
}

.campo-input input {
    flex: 1;
    width: 100%;
    padding: 0.75rem 0.85rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--texto);
    background: transparent;
    border: none;
    border-radius: 8px;
}

.campo-input input:focus {
    outline: none;
}

.campo-input input::placeholder {
    color: #b7bfc6;
}

.botao-olho {
    display: flex;
    background: none;
    border: none;
    padding: 0.5rem 0.85rem;
    margin-right: 0.25rem;
    border-radius: 8px;
    cursor: pointer;
    color: var(--texto-suave);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.botao-olho:hover {
    background: color-mix(in srgb, var(--cor-primaria) 12%, transparent);
    color: var(--cor-primaria);
    transform: scale(1.08);
}

.botao-olho:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
    border-radius: 6px;
}

.botao-entrar {
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--cor-primaria);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: 0.5rem;
}

.botao-entrar:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--cor-primaria) 60%, transparent);
}

.botao-entrar:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 3px;
}

.botao-entrar:disabled {
    opacity: 0.7;
    cursor: default;
}

.link-esqueci {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
    color: var(--cor-primaria);
    font-size: 0.9rem;
    text-decoration: none;
    cursor: not-allowed;
    opacity: 0.75;
}

.link-esqueci:hover {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}