/* =========================================================
   Login – identidade AZ Tributário (tela cheia)
   Tons extraídos da arte institucional (img/login-az.jpg):
   azul-marinho #1B304A / #0D233D  ·  dourado do "Z" #C89F52
   ========================================================= */
:root {
    --az-navy-900:     #0B1A2C;   /* fundo do formulário            */
    --az-navy-800:     #0D233D;   /* topo da arte                   */
    --az-navy-700:     #1B304A;   /* tom dominante da arte          */
    --az-navy-600:     #263B52;
    --az-surface:      #13263D;   /* inputs                         */
    --az-border:       #2A4058;
    --az-text:         #EEF1F5;
    --az-text-muted:   #9AA8B8;
    --az-placeholder:  #5C6F84;
    --az-gold:         #C89F52;   /* dourado do logotipo            */
    --az-gold-light:   #DDBD7E;
    --az-gold-ink:     #0B1A2C;
    --az-radius:       6px;
    --az-font:         "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --az-serif:        "Cormorant Garamond", "Times New Roman", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body.az-login {
    background: var(--az-navy-900);
    color: var(--az-text);
    font-family: var(--az-font);
    -webkit-font-smoothing: antialiased;
}

/* form padrão do Web Forms também precisa ocupar a tela */
body.az-login > form { height: 100%; }

/* ---------- Layout tela cheia ---------- */
.az-shell {
    display: grid;
    grid-template-columns: minmax(420px, 42%) 1fr;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

.az-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px clamp(24px, 5vw, 80px);
    /* fundo liso na borda direita para fundir sem emenda com a arte */
    background:
        radial-gradient(85% 65% at 0% 0%, rgba(27,48,74,.65) 0%, rgba(11,26,44,0) 70%),
        var(--az-navy-900);
}
/* filete dourado, como na arte */
.az-panel::after {
    content: "";
    position: absolute;
    left: 0; bottom: 22%;
    width: 64px; height: 1px;
    background: rgba(200,159,82,.55);
}

.az-card { width: 100%; max-width: 360px; }

/* ---------- Arte institucional à direita ---------- */
.az-hero {
    position: relative;
    overflow: hidden;
    background: var(--az-navy-700) url("../img/login-az.jpg") 62% 15% / cover no-repeat;
}
/* funde a arte no painel do formulário */
.az-hero::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(90deg, var(--az-navy-900) 0%, rgba(11,26,44,.6) 10%, rgba(11,26,44,.15) 25%, rgba(11,26,44,0) 38%),
        linear-gradient(0deg, rgba(11,26,44,.45) 0%, rgba(11,26,44,0) 35%);
}

/* ---------- Marca / título ---------- */
.az-brand-mobile { display: none; }

.az-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .28em;
    color: var(--az-gold);
    margin-bottom: 18px;
}
.az-title {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: 0 0 40px;
}
.az-title .az-dot { color: var(--az-gold); }

/* ---------- Alerta (pnlErro) ---------- */
.alerta-login {
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 20px;
    border: 1px solid rgba(229,72,77,.45);
    background: rgba(229,72,77,.10);
    border-radius: var(--az-radius);
    color: #F7B0B3;
    font-size: 14px;
}

/* ---------- Campos ---------- */
.az-field { margin-bottom: 24px; }
.az-label {
    display: block;
    font-size: 15px;
    margin: 0 0 8px 2px;
}
.az-input-wrap { position: relative; }

.az-input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 44px;
    background: var(--az-surface);
    border: 1px solid var(--az-border);
    border-radius: var(--az-radius);
    color: var(--az-text);
    font: inherit;
    font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}
.az-input--icon-right { padding: 0 44px 0 14px; }
.az-input::placeholder { color: var(--az-placeholder); }
.az-input:focus {
    outline: none;
    border-color: var(--az-gold);
    box-shadow: 0 0 0 3px rgba(200,159,82,.20);
}
.az-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--az-surface) inset;
    -webkit-text-fill-color: var(--az-text);
}

.az-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--az-text-muted);
    pointer-events: none;
}
.az-toggle {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: none; border: 0; border-radius: 6px;
    font-size: 18px;
    color: var(--az-text-muted);
    cursor: pointer;
}
.az-toggle:hover, .az-toggle:focus-visible { color: var(--az-gold); outline: none; }

/* ---------- Opções ---------- */
.az-opcoes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 4px 2px 36px;
    font-size: 14px;
}
.az-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--az-text-muted);
    cursor: pointer;
}
.az-check input { accent-color: var(--az-gold); width: 15px; height: 15px; margin: 0; }

.az-link {
    color: var(--az-text-muted);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.az-link:hover, .az-link:focus-visible { color: var(--az-gold-light); }

/* ---------- Botão ---------- */
.az-btn {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0 auto 28px;
    border: 0;
    border-radius: var(--az-radius);
    background: linear-gradient(90deg, var(--az-gold) 0%, var(--az-gold-light) 100%);
    color: var(--az-gold-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .15s, transform .05s;
}
.az-btn:hover { filter: brightness(1.06); }
.az-btn:active { transform: translateY(1px); }
.az-btn:focus-visible { outline: 2px solid var(--az-gold-light); outline-offset: 3px; }
.az-btn[disabled] { opacity: .6; cursor: wait; }

.az-center { text-align: center; }
.az-footer {
    margin-top: 48px;
    text-align: center;
    font-size: 12px;
    color: var(--az-placeholder);
}

/* ---------- AZ_Interno: aviso de carga inicial (instalação) ---------- */
.az-instalacao-login {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 28px;
    padding: 12px 14px;
    border: 1px dashed rgba(200,159,82,.55);
    border-radius: var(--az-radius);
    background: rgba(200,159,82,.08);
    color: var(--az-gold-light);
    font-size: 13px;
    line-height: 1.5;
}
.az-instalacao-login i { font-size: 18px; margin-top: 1px; }
.az-instalacao-login .az-link { color: var(--az-gold); font-size: 13px; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
    .az-shell { grid-template-columns: 1fr; }
    .az-hero  { display: none; }
    .az-panel::after { display: none; }
    .az-title { font-size: 36px; }

    /* sem a arte, a marca vai para o formulário */
    .az-brand-mobile {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 32px;
    }
    .az-brand-mobile .az-mark {
        font-family: var(--az-font);
        font-size: 34px;
        font-weight: 700;
        letter-spacing: .02em;
        line-height: 1;
    }
    .az-brand-mobile .az-mark span { color: var(--az-gold); }
    .az-brand-mobile .az-sep { width: 1px; height: 30px; background: var(--az-text-muted); opacity: .6; }
    .az-brand-mobile .az-name {
        font-family: var(--az-serif);
        font-size: 20px;
        letter-spacing: .14em;
    }
}

/* ---------- AZ_Interno: aviso de sucesso e troca de modo (senha / link / recuperar) ---------- */
.alerta-login { display: flex; }
.alerta-login--ok {
    border-color: rgba(31,122,92,.55);
    background: rgba(31,122,92,.14);
    color: #9fdcc4;
}
.az-modos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    margin-top: 18px;
}
.az-modos .az-link { font-size: 13px; }
.az-texto { color: var(--az-text-muted); font-size: 14px; line-height: 1.55; margin: -12px 0 24px; }