/* customHomeVtecSistemas.css — Estilos da barra de login e layout mobile */

/* ---------- Header / navbar login bar ---------- */

/* Aumenta a altura para caber logo + campos + "Esqueci minha senha" */
.header.navbar {
    height: auto !important;
    min-height: 72px !important;
    padding: 0 20px !important;
}

/* Garante que o conteúdo interno centraliza verticalmente */
.header .header-inner {
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 72px;
}

/* Tabela de login ocupa toda a largura e centraliza verticalmente */
#camposLogin {
    width: 100%;
}

#camposLogin td {
    padding: 6px 4px;
}

/* Corrige o texto escondido atrás do ícone:
   custom.css define padding: 7px 7px !important que sobrescreve
   o padding-left: 33px do .input-icon input em style.css */
.header .input-icon .form-control,
.header .input-icon input[type="text"],
.header .input-icon input[type="password"] {
    padding-left: 33px !important;
}

/* Ajusta o offset do page-container para a nova altura da navbar */
.page-header-fixed .page-container {
    margin-top: 72px !important;
}

/* ---------- Logo mobile: oculta por padrão, aparece apenas em celular ---------- */
.vtec-mobile-logo {
    display: none !important;
}

/* ---------- Logo desktop: remove a altura fixa que empurrava a imagem pra baixo ---------- */
.header.navbar .navbar-brand {
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 0 !important;
}

.header.navbar .navbar-brand img,
.header.navbar .navbar-brand .img-responsive {
    max-height: 50px !important;
    width: auto !important;
    height: auto !important;
    display: block;
}


/* ---------- Mobile: tela de login em tela cheia ---------- */
@media (max-width: 767px) {

    /* Navbar vira tela cheia */
    .header.navbar {
        height: 100vh !important;
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(160deg, #070d1b 0%, #0f172a 55%, #1a2f4e 100%) !important;
        padding: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Conteúdo interno centralizado em coluna */
    .header .header-inner {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 360px !important;
        min-height: unset !important;
        padding: 0 28px !important;
        gap: 0 !important;
    }

    /* Logo mobile */
    .vtec-mobile-logo {
        display: block !important;
        text-align: center;
        margin-bottom: 40px;
    }

    .vtec-mobile-logo img {
        width: 100%;
        max-width: 162px;
        height: auto;
        filter: brightness(0) invert(1);
        opacity: 0.92;
    }

    /* Tabela vira coluna */
    #camposLogin,
    #camposLogin tbody,
    #camposLogin tr {
        display: block !important;
        width: 100% !important;
    }

    /* Esconde célula do logo desktop e do espaçador no mobile */
    .vtec-td-logo,
    .vtec-td-spacer {
        display: none !important;
    }

    /* Células de campo e botão: bloco, largura total */
    .vtec-td-user,
    .vtec-td-pass,
    .vtec-td-btn {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px 0 !important;
    }

    /* input-icon ocupa largura total */
    .header .input-icon {
        width: 100%;
    }

    /* Campos com visual escuro e tamanho maior */
    .header .input-icon .form-control,
    .header .input-icon input[type="text"],
    .header .input-icon input[type="password"] {
        width: 100% !important;
        height: 50px !important;
        font-size: 15px !important;
        background-color: rgba(255, 255, 255, 0.07) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        color: #e2e8f0 !important;
        border-radius: 10px !important;
        padding-left: 40px !important;
    }

    /* Inter não tem o glifo do bullet de senha — força fonte do sistema */
    .header .input-icon input[type="password"] {
        font-family: Arial, 'Helvetica Neue', sans-serif !important;
    }

    .header .input-icon .form-control:focus,
    .header .input-icon input[type="text"]:focus,
    .header .input-icon input[type="password"]:focus {
        background-color: rgba(255, 255, 255, 0.11) !important;
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    }

    /* Placeholder claro */
    .header .input-icon input::placeholder {
        color: rgba(255, 255, 255, 0.35) !important;
    }

    /* Ícone claro dentro dos campos */
    .header .input-icon i {
        color: rgba(255, 255, 255, 0.40) !important;
        margin: 17px 2px 4px 12px !important;
        font-size: 16px !important;
    }

    /* Botão Entrar: bloco azul com ícone grande */
    .vtec-td-btn {
        margin-top: 10px !important;
    }

    .vtec-td-btn > a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 14px 0 !important;
        background: linear-gradient(135deg, #1d4ed8, #3b82f6) !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 18px rgba(37, 99, 235, 0.45) !important;
        transition: box-shadow 0.2s ease, transform 0.2s ease !important;
    }

    .vtec-td-btn > a:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 6px 22px rgba(37, 99, 235, 0.55) !important;
    }

    /* Sobrescreve os inline styles do ícone do botão */
    .vtec-td-btn > a > i {
        font-size: 26px !important;
        color: #fff !important;
        background-color: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Esqueci minha senha centralizado */
    .vtec-td-pass .EsqueciMinhaSenha p {
        text-align: center !important;
        margin: 8px 0 0 0 !important;
        font-size: 11px !important;
    }

    .vtec-td-pass .EsqueciMinhaSenha p a {
        color: rgba(255, 255, 255, 0.50) !important;
    }

    .vtec-td-pass .EsqueciMinhaSenha p a:hover {
        color: #60a5fa !important;
    }
}