/* ============================================================
   Tela de login — layout moderno em split 50/50.
   Esquerda: formulário em card centralizado.
   Direita: painel com gradiente teal + banner promocional.
   ============================================================ */

:root {
    --lg-primary: #0d9488;
    --lg-primary-hover: #0f766e;
    --lg-primary-soft: rgba(13, 148, 136, 0.08);
    --lg-text: #1f2937;
    --lg-text-strong: #0f172a;
    --lg-text-muted: #64748b;
    --lg-border: #e2e8f0;
    --lg-border-strong: #cbd5e1;
    --lg-bg: #f8fafc;
    --lg-card: #ffffff;
    --lg-error-bg: #fef2f2;
    --lg-error-border: #fecaca;
    --lg-error-text: #b91c1c;
    --lg-success-bg: #f0fdf4;
    --lg-success-border: #bbf7d0;
    --lg-success-text: #15803d;
    --lg-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    --lg-radius: 10px;
    --lg-input-radius: 8px;
    --lg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Reset local — login não compartilha layout com o resto do app.
   !important para vencer paddings residuais do bootstrap.min.css e
   estilos herdados que vinham do template antigo. */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    background: var(--lg-bg);
    font-family: var(--lg-font);
    color: var(--lg-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
}

#wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

#main {
    flex: 1;
    display: flex;
    margin: 0;
}

/* Container quebra o Bootstrap antigo (.container width:870px) — ocupa
   tudo e divide em duas colunas iguais via flexbox. */
.container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex: 1;
    align-items: stretch;
    min-height: 100vh;
}

/* ─── Painel esquerdo (formulário) ──────────────────────── */
.col-xs-4 {
    width: 40% !important;
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    box-sizing: border-box;
}

/* Card branco do form */
.col-xs-4 > * {
    width: 100%;
    max-width: 440px;
}

.col-xs-4 .ui-outputlabel,
.col-xs-4 .campos-login,
.col-xs-4 > h:panelGroup,
.col-xs-4 .hc-messages {
    max-width: 440px;
}

/* Logo: maior, centralizado, com respiro abaixo */
.col-xs-4 img {
    max-width: 180px;
    height: auto;
    margin: 0 auto 32px;
    display: block;
}

/* Mensagens — escondidas por padrão; só aparecem quando o PrimeFaces
   gera as classes de severidade dentro (.ui-messages-error/warn/info).
   Sem isso, <p:messages> vazio renderiza um <div> que pegaria estilo
   herdado do PF e aparece como faixa colorida fantasma.
   Specificity alta (body + form/.col-xs-4) para vencer cache e
   regras herdadas do style.min.css. */
body .ui-messages,
body .hc-messages,
body form .ui-messages,
body form .hc-messages,
body .col-xs-4 .ui-messages,
body .col-xs-4 .hc-messages {
    display: none !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}
body .ui-messages:has(.ui-messages-error),
body .ui-messages:has(.ui-messages-warn),
body .ui-messages:has(.ui-messages-info),
body .hc-messages:has(.ui-messages-error),
body .hc-messages:has(.ui-messages-warn),
body .hc-messages:has(.ui-messages-info) {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    margin-bottom: 16px !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    border: 1px solid !important;
}
/* Erro */
.ui-messages:has(.ui-messages-error),
.hc-messages:has(.ui-messages-error) {
    background: var(--lg-error-bg) !important;
    border-color: var(--lg-error-border) !important;
    color: var(--lg-error-text) !important;
}
/* Warning (campos obrigatórios, avisos gerais) */
.ui-messages:has(.ui-messages-warn),
.hc-messages:has(.ui-messages-warn) {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}
/* Info */
.ui-messages:has(.ui-messages-info),
.hc-messages:has(.ui-messages-info) {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}
.ui-messages ul,
.hc-messages ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.ui-messages li,
.hc-messages li {
    margin: 0 !important;
    padding: 2px 0 !important;
    list-style: none !important;
}
.ui-messages-error-detail,
.ui-messages-warn-detail,
.ui-messages-info-detail,
.ui-message-error,
.ui-message-warn,
.ui-message-info {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    color: inherit !important;
}

/* ─── Form ─────────────────────────────────────────────── */
.campos-login {
    display: block;
    margin-top: 0;
}

.campos-login h4 {
    font-size: 22px;
    font-weight: 700;
    color: var(--lg-text-strong);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

/* Subtítulo curto — adicionar via XHTML se quiser */
.campos-login .login-subtitle {
    font-size: 14px;
    color: var(--lg-text-muted);
    margin: 0 0 28px;
    line-height: 1.5;
}

.campos-login .ui-outputlabel,
.campos-login label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--lg-text);
    margin: 14px 0 6px;
}

.campos-login .ui-outputlabel:first-of-type,
.campos-login label:first-of-type {
    margin-top: 0;
}

/* Inputs altura confortável, border-radius generoso, focus teal */
.input,
.campos-login .ui-inputtext,
.campos-login input.ui-inputfield {
    width: 100% !important;
    height: 44px !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: var(--lg-font) !important;
    color: var(--lg-text-strong) !important;
    background: #fff !important;
    border: 1px solid var(--lg-border-strong) !important;
    border-radius: var(--lg-input-radius) !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.input:hover,
.campos-login .ui-inputtext:hover,
.campos-login input.ui-inputfield:hover {
    border-color: #94a3b8 !important;
}

.input:focus,
.campos-login .ui-inputtext:focus,
.campos-login input.ui-inputfield:focus,
.campos-login .ui-inputtext.ui-state-focus,
.campos-login input.ui-inputfield.ui-state-focus {
    border-color: var(--lg-primary) !important;
    box-shadow: 0 0 0 3px var(--lg-primary-soft) !important;
    padding: 10px 14px !important;
    outline: none !important;
}

.input.ui-state-error,
.campos-login .ui-inputfield.ui-state-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* PrimeFaces password wrapper */
.campos-login .ui-password {
    width: 100% !important;
    display: block !important;
}
.campos-login .ui-password input {
    width: 100% !important;
}

/* Link "Esqueceu a senha?" */
.text {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: var(--lg-primary) !important;
    text-decoration: none;
    margin: 12px 0 20px !important;
    transition: color .15s ease;
}
.text:hover {
    color: var(--lg-primary-hover) !important;
    text-decoration: none;
}

/* Botão primário — full width, altura 44px, brand color.
   Specificity alta (body + ui-button) pra vencer regras herdadas
   do style.min.css (.bt-azul) e do PrimeFaces (.ui-button).
   Cobre tanto .bt-login (index) quanto .bt-azul (esqueci-senha). */
body .campos-login .bt-login,
body .campos-login .bt-azul,
body .campos-login .ui-button.bt-login,
body .campos-login .ui-button.bt-azul,
body .campos-login button.bt-login,
body .campos-login button.bt-azul {
    width: 100% !important;
    height: 44px !important;
    margin: 24px 0 0 !important;
    padding: 0 16px !important;
    background: var(--lg-primary) !important;
    color: #fff !important;
    border: 1px solid var(--lg-primary) !important;
    border-radius: var(--lg-input-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--lg-font) !important;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
    box-shadow: 0 1px 2px rgba(13, 148, 136, 0.2);
}
/* Captcha (esqueci-senha) com respiro */
.campos-login .ui-captcha,
.campos-login [class*="captcha"] {
    margin: 16px 0 !important;
}
body .campos-login .bt-login .ui-button-text,
body .campos-login .bt-azul .ui-button-text {
    color: #fff !important;
    padding: 0 !important;
    background: transparent !important;
}
body .campos-login .bt-login:hover,
body .campos-login .bt-azul:hover {
    background: var(--lg-primary-hover) !important;
    border-color: var(--lg-primary-hover) !important;
    box-shadow: 0 2px 6px rgba(13, 148, 136, 0.28);
}
body .campos-login .bt-login:active,
body .campos-login .bt-azul:active {
    transform: translateY(1px);
}

/* Separador "ou" — visual coeso */
.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0;
    color: var(--lg-text-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--lg-border);
}

/* Botões OAuth — visual unificado com o botão primário,
   diferindo apenas pela cor (branco com borda). */
.btn-oauth {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    margin-top: 8px;
    background: #fff;
    color: var(--lg-text-strong);
    border: 1px solid var(--lg-border-strong);
    border-radius: var(--lg-input-radius);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--lg-font);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.btn-oauth:hover {
    background: var(--lg-bg);
    border-color: #94a3b8;
    text-decoration: none;
    color: var(--lg-text-strong);
}
.btn-oauth img,
.btn-oauth svg {
    width: 18px;
    height: 18px;
}

/* Mensagens de erro de OAuth (Google/Microsoft/Meta) */
.oauth-error {
    margin-top: 12px;
    background: var(--lg-error-bg);
    border: 1px solid var(--lg-error-border);
    color: var(--lg-error-text);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
}
.oauth-success {
    margin-top: 12px;
    background: var(--lg-success-bg);
    border: 1px solid var(--lg-success-border);
    color: var(--lg-success-text);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
}

/* ─── Growl (toast no canto superior direito) ──────────── */
/* Alertas/avisos vêm como growl ao invés de faixa fixa abaixo do form.
   Visual moderno: card com ícone à esquerda, texto, fechar no canto.
   Border-left destacada com a cor da severidade pra sinalização rápida.
   `position: fixed` explícito + display:block forçado para não cair em
   regra herdada que esconde elemento. */
.ui-growl,
body .ui-growl {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    left: auto !important;
    bottom: auto !important;
    width: 360px !important;
    height: auto !important;
    max-height: none !important;
    z-index: 9999 !important;
    font-family: var(--lg-font) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ui-growl-item-container {
    background: #fff !important;
    border: 1px solid var(--lg-border) !important;
    border-left: 4px solid !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    position: relative !important;
    overflow: hidden;
    animation: lg-toast-in .25s cubic-bezier(.21, 1.02, .73, 1) both;
}
@keyframes lg-toast-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
/* Layout interno em flex: ícone | texto | fechar */
.ui-growl-item-container .ui-growl-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 14px 14px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.ui-growl-item-container .ui-growl-item::after {
    content: none !important;
}
/* Cores por severidade — só na borda lateral e no ícone, fundo branco */
.ui-growl-item-container.ui-growl-message-error,
.ui-growl-item-container.ui-state-highlight {
    border-left-color: #dc2626 !important;
}
.ui-growl-item-container.ui-growl-message-error .ui-growl-image::before {
    color: #dc2626 !important;
}
.ui-growl-item-container.ui-growl-message-warn {
    border-left-color: #d97706 !important;
}
.ui-growl-item-container.ui-growl-message-warn .ui-growl-image::before {
    color: #d97706 !important;
}
.ui-growl-item-container.ui-growl-message-info {
    border-left-color: #2563eb !important;
}
.ui-growl-item-container.ui-growl-message-info .ui-growl-image::before {
    color: #2563eb !important;
}
/* Ícone (FontAwesome) à esquerda — usa o <span class="ui-growl-image">
   gerado pelo PrimeFaces e injeta o glyph via ::before. */
.ui-growl-item-container .ui-growl-image {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
    background: none !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    float: none !important;
}
.ui-growl-item-container .ui-growl-image::before {
    font-family: FontAwesome;
    font-size: 20px;
    line-height: 1;
}
.ui-growl-item-container .ui-growl-image-error::before {
    content: "\f06a"; /* fa-exclamation-circle */
}
.ui-growl-item-container .ui-growl-image-warn::before {
    content: "\f071"; /* fa-exclamation-triangle */
}
.ui-growl-item-container .ui-growl-image-info::before {
    content: "\f05a"; /* fa-info-circle */
}
/* Bloco de texto da mensagem ocupa o espaço entre ícone e fechar */
.ui-growl-item-container .ui-growl-message {
    flex: 1;
    margin: 0 !important;
    padding: 1px 0 0 !important;
    color: var(--lg-text-strong) !important;
    min-width: 0;
}
/* O ViewMessage do app coloca o conteúdo no summary (title) — mostramos
   ele como linha principal da mensagem com tipografia coerente. */
.ui-growl-item-container .ui-growl-title {
    display: block !important;
    color: var(--lg-text-strong) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    word-break: break-word;
    margin: 0 !important;
    padding: 0 !important;
}
.ui-growl-item-container .ui-growl-message p {
    color: var(--lg-text-strong) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    word-break: break-word;
}
/* Botão fechar (×) no canto superior direito do toast */
.ui-growl-item-container .ui-growl-icon-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--lg-text-muted) !important;
    background: none !important;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity .15s ease, background .15s ease;
}
.ui-growl-item-container .ui-growl-icon-close::before {
    font-family: FontAwesome;
    content: "\f00d"; /* fa-times */
    font-size: 12px;
    line-height: 1;
}
.ui-growl-item-container .ui-growl-icon-close:hover {
    opacity: 1;
    background: var(--lg-bg);
}
/* Esconde o ::after "clear: both" do PF que dá espaço inútil */
.ui-growl-item-container > div[style*="clear"] {
    display: none !important;
}

/* MFA — layout limpo */
.campos-login h4 + p {
    color: var(--lg-text-muted);
    font-size: 13px;
    margin: 4px 0 16px;
}

#codigoMfa {
    text-align: center !important;
    font-size: 22px !important;
    letter-spacing: 10px !important;
    font-family: var(--lg-font) !important;
    font-weight: 600 !important;
}

/* ─── Painel direito (showcase de marca com banner como card) ───
   Estilo Conta Azul: o painel inteiro tem o gradiente da marca,
   e a imagem do banner aparece como um card centralizado, com
   bordas arredondadas e sombra. Assim qualquer aspect ratio de
   imagem (uploadada pelo cliente via BannerMB) fica bem servida
   e nada é cortado. */
.col-xs-8 {
    width: 60% !important;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 50%, #115e59 100%);
    box-sizing: border-box;
    padding: 56px 48px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.col-xs-8 a {
    display: block;
    text-decoration: none;
    line-height: 0;
    max-width: 100%;
    z-index: 1;
}
/* max-height em vh: percentual em pai sem altura explícita não computa
   (min-height não conta), então a imagem em tamanho natural fazia a
   coluna crescer e disparava scroll vertical. Usar viewport corta no
   limite real da janela. */
.col-xs-8 a img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: calc(100vh - 180px) !important;
    object-fit: contain;
    object-position: center;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28),
                0 4px 12px rgba(15, 23, 42, 0.12) !important;
    margin: 0 !important;
    background: #fff;
    transition: transform .35s ease, box-shadow .35s ease;
}
.col-xs-8 a:hover img {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.32),
                0 6px 16px rgba(15, 23, 42, 0.16) !important;
}

/* ─── Footer ────────────────────────────────────────────── */
.site-footer {
    background: #fff;
    color: var(--lg-text-muted);
    padding: 14px 0;
    border-top: 1px solid var(--lg-border);
    position: relative;
    bottom: 0;
    width: 100%;
    flex-shrink: 0;
    font-size: 12px;
}
#footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.rodape-empresa,
.rodape-desenv {
    float: none !important;
}
.text-desenv {
    margin: 0 8px 0 0 !important;
    float: none !important;
    font-size: 12px !important;
    color: var(--lg-text-muted) !important;
}

/* ─── Responsivo ─────────────────────────────────────────
   Ambos os painéis SEMPRE visíveis, só muda a proporção (e empilha
   no mobile). Banner como card com object-fit:contain + max-height
   em vh garante que nada é cortado e nenhuma direção causa scroll.

   - ≥1280px: 40/60 (form/banner)
   - 1024–1279px: 45/55 (form ganha respiro no laptop comum)
   - 768–1023px: 50/50 (tablet em paisagem)
   - ≤767px: empilhado — banner faixa de 160px no topo, form abaixo
   - ≤480px: paddings reduzidos
*/

@media (max-width: 1279px) and (min-width: 1024px) {
    .col-xs-4 {
        width: 45% !important;
        padding: 44px 28px;
    }
    .col-xs-8 {
        width: 55% !important;
        padding: 40px 32px !important;
    }
}

@media (max-width: 1023px) and (min-width: 768px) {
    .col-xs-4 {
        width: 50% !important;
        padding: 40px 24px;
    }
    .col-xs-8 {
        width: 50% !important;
        padding: 32px 24px !important;
    }
    .col-xs-4 img {
        max-width: 150px;
    }
}

/* Mobile — empilha: banner em faixa no topo, form abaixo */
@media (max-width: 767px) {
    .container {
        flex-direction: column;
        min-height: 100vh;
    }
    .col-xs-4 {
        width: 100% !important;
        padding: 28px 20px 32px;
        align-items: flex-start;
        flex: 1 1 auto;
        order: 2;
    }
    .col-xs-4 > * {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .col-xs-8 {
        width: 100% !important;
        height: 160px;
        flex: 0 0 160px;
        padding: 16px 20px !important;
        order: 1;
    }
    .col-xs-8 a img {
        border-radius: 10px !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18) !important;
    }
    .col-xs-4 img {
        max-width: 140px;
        margin: 0 auto 20px;
    }
    .campos-login h4 {
        font-size: 20px;
    }
    .campos-login .login-subtitle {
        font-size: 13px;
        margin-bottom: 24px;
    }
    .ui-growl {
        top: 12px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
    }
}

/* Phone pequeno — paddings ainda menores */
@media (max-width: 480px) {
    .col-xs-4 {
        padding: 24px 16px;
    }
    .col-xs-4 img {
        max-width: 120px;
        margin: 0 auto 18px;
    }
    .campos-login h4 {
        font-size: 18px;
    }
    .input,
    .campos-login .ui-inputtext,
    .campos-login input.ui-inputfield {
        height: 42px !important;
        font-size: 16px !important; /* >= 16px evita iOS zoom-in */
    }
    .bt-login,
    .bt-azul {
        height: 44px !important;
        font-size: 14px !important;
    }
    .btn-oauth {
        height: 42px;
        font-size: 13px;
    }
}

/* ─── Compatibilidade com classes legadas ───────────────── */
.suporte,
.banner,
.content-banner-login {
    display: none; /* removidas — substituídas por .col-xs-8 com gradient */
}

/* Mobile (≤768px): empilhar form e banner. */
@media (max-width: 768px) {
    #wrap > #main > .container > .col-xs-4,
    #wrap > #main > .container > .col-xs-8 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}