/*
 * Identidade visual da UFAL sobre o tema padrão do CAS 8.
 * Fundo herdado do CAS antigo (https://sistemas.ufal.br/cas/login): foto
 * institucional em tons de cinza. Cabeçalho, rodapé, fontes, cartões, botões
 * e campos seguem o Perfil UFAL (perfil.ufal.br, branch new-ui), com a paleta
 * do tema oficial do ufal.br.
 * Este arquivo é carregado DEPOIS do cas.css padrão (ver cas-theme-default.properties).
 */

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("/fonts/atkinson-hyperlegible-next-825fabef695fe0e38de5094886eaf871.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("/fonts/figtree-202cfb54d4e66d1702404ade49339ceb.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
}

:root {
    --ufal: #C6151C;          /* marca: faixa do cabeçalho e selo */
    --ufal-vinho: #92192A;    /* erros */
    --azul: #144A8D;          /* cor principal */
    --azul-escuro: #073164;
    --azul-claro: #1F7FC4;    /* degradê do cabeçalho */
    --grafite: #4A4E58;       /* rodapé */
    --foco: #22A0DA;
    --linha: #DADDE3;
    --campo: #BCC1CA;
    --texto: #2B2F38;
    --suave: #5E6470;
    --raio: 12px;
    --raio-campo: 6px;
    --fonte-texto: "Atkinson Hyperlegible Next", system-ui, sans-serif;
    --fonte-titulo: "Figtree", sans-serif;
}

/* Foto institucional como plano de fundo, em tons de cinza e suavizada
   para manter o cartão de login legível */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("/images/front-d5382a33b62d1eecb102aee0921e58fb.jpg") center / cover no-repeat;
    filter: grayscale(1) opacity(0.22);
    z-index: -1;
    pointer-events: none;
}

body {
    background-color: #f5f5f5;
}

/* O cas.css pinta a imagem padrão do CAS (--bg-image) nesta div, que fica
   por cima do body::before e esconderia a foto da UFAL */
.bgimage {
    background-image: none;
}

/* O conteúdo cresce com o cartão e empurra o rodapé; senão o cartão de login
   passa por baixo do rodapé em telas baixas. O cas.css rola só a .bgimage
   (altura fixa) e trava o body com overflow: hidden; aqui quem rola é a
   página, então o body precisa ser liberado. */
body {
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
}
.bgimage {
    flex: 1 0 auto !important;
    height: auto !important;
}

/* O cas.css aplica position: relative em ".drop-button span", o que anula o
   .visually-hidden e faz textos só para leitor de tela vazarem no botão */
.drop-button .visually-hidden {
    position: absolute;
}

/* ---------- texto ---------- */

body,
.mdc-typography,
.mdc-button,
.mdc-text-field__input,
.mdc-floating-label,
.btn {
    font-family: var(--fonte-texto);
}

body {
    color: var(--texto);
    font-size: 16px;
    line-height: 1.55;
}

h1, h2, h3, h4, legend,
.mdc-typography--headline1, .mdc-typography--headline2, .mdc-typography--headline3,
.mdc-typography--headline4, .mdc-typography--headline5, .mdc-typography--headline6 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    color: var(--azul-escuro);
    line-height: 1.15;
}

a { color: var(--azul); }
a:hover, a:focus { color: var(--azul-escuro); }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

/* Títulos acima do formulário (screen.welcome.instructions) */
.ufal-title {
    margin: 0.5rem 0 0;
    font-size: 1.75rem;
    text-align: center;
}

.ufal-subtitle {
    margin: 0 0 1rem;
    font-family: var(--fonte-texto);
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--suave);
    text-align: center;
}

/* ---------- cabeçalho ---------- */

/* degradê azul com a faixa vermelha embaixo, como o topo do Perfil */
#app-bar {
    background: linear-gradient(90deg, var(--azul), var(--azul-claro)) !important;
    border-bottom: 4px solid var(--ufal);
    box-shadow: none !important;
}
#app-bar .navbar.bg-dark { background: transparent !important; }
#app-bar .container-fluid {
    max-width: 1170px;
    margin: 0 auto;
    justify-content: flex-start !important;
}
.mdc-top-app-bar--fixed-adjust { padding-top: 68px; }
/* as três seções da barra dividem a largura (flex: 1); a marca vai para a esquerda */
#app-bar .mdc-top-app-bar__section--align-start { flex: 0 0 auto; }
/* sem o botão do menu lateral (desligado no tema) a seção fica vazia */
#app-bar .mdc-top-app-bar__section--align-start:not(:has(button)) { display: none; }
#app-bar .ufal-marca-secao { padding-left: 3px; } /* alinha "UFAL" com o texto do rodapé */
#app-bar .ufal-marca-secao { flex: 1 1 auto; justify-content: flex-start; }

.ufal-marca-link {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%; /* 64px no desktop, 56px no celular */
    color: #fff;
    font: 800 24px var(--fonte-titulo);
    text-decoration: none;
}
.ufal-marca-link:hover, .ufal-marca-link:focus { color: #fff; }
#app-bar :focus-visible { outline-color: #fff; }

.ufal-marca .selo {
    font-size: 14px;
    font-weight: 700;
    background: var(--ufal);
    padding: 2px 9px;
    border-radius: 6px;
}

/* ---------- rodapé ---------- */

/* a largura do conteúdo (1170px, a mesma do cabeçalho) sai do padding: o
   cas.css zera a margem automática dos filhos do rodapé */
#casFooter.rodape {
    display: block !important; /* o cas.css esconde o rodapé no celular; o Perfil mostra */
    background: var(--grafite) !important;
    color: #D5D8DE;
    font-size: 14px;
    padding: 24px max(15px, calc((100% - 1140px) / 2));
}
.rodape-conteudo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.rodape a { color: #fff; }
.rodape .logos { display: flex; gap: 16px; align-items: center; }
.rodape .logos img { display: block; opacity: .85; }
.rodape .logos a:hover img, .rodape .logos a:focus img { opacity: 1; }

/* ---------- cartões ---------- */

/* cartão branco com borda fina e cantos arredondados sobre a foto */
#loginForm,
.login-section,
.mdc-card,
.card {
    background-color: #fff;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    box-shadow: none;
}

/* ---------- botões ---------- */

.mdc-button,
.btn {
    font-weight: 500;
    font-size: 16px;
    text-transform: none;
    letter-spacing: normal;
    border-radius: var(--raio-campo) !important;
    box-shadow: none !important;
}
/* o cas.css põe cantos de 9px e uma sombra (filter: drop-shadow) no botão de entrar */
.drop-button { filter: none !important; }
.mdc-button--raised:not(:disabled),
.mdc-button--unelevated:not(:disabled),
.btn-primary {
    background-color: var(--azul) !important;
    border-color: var(--azul) !important;
    color: #fff !important;
}
.mdc-button--raised:not(:disabled):hover,
.mdc-button--unelevated:not(:disabled):hover,
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--azul-escuro) !important;
    border-color: var(--azul-escuro) !important;
}

/* olho da senha colado no campo: só os cantos da direita arredondados */
.reveal-password { border-radius: 0 var(--raio-campo) var(--raio-campo) 0 !important; }

/* ---------- campos ---------- */

.mdc-text-field--outlined .mdc-notched-outline__leading,
.mdc-text-field--outlined .mdc-notched-outline__notch,
.mdc-text-field--outlined .mdc-notched-outline__trailing {
    border-color: var(--campo) !important;
}
.mdc-text-field--outlined .mdc-notched-outline__leading { border-radius: var(--raio-campo) 0 0 var(--raio-campo) !important; }
.mdc-text-field--outlined .mdc-notched-outline__trailing { border-radius: 0 var(--raio-campo) var(--raio-campo) 0 !important; }
.mdc-text-field--with-trailing-icon .mdc-notched-outline__trailing { border-radius: 0 !important; }
.mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--azul) !important;
}
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label { color: var(--azul) !important; }
.mdc-text-field__input { color: var(--texto) !important; }

/* ---------- mensagens ---------- */

.banner, .alert {
    border-radius: var(--raio);
    border-left-width: 6px;
}
.banner-danger, .alert-danger { border-left-color: var(--ufal-vinho); }