/* UHEAD 24/09/2026 - login moderno - folha propria da casLoginView.jsp (substitui custom.css/Bootstrap so nesta tela) */

/* Roboto: tipografia principal do Manual de Identidade Visual da UFERSA (Assecom v2.0, 2018).
   Embutida (font/roboto-latin-*.woff2, Apache 2.0 em font/ROBOTO-LICENSE.txt): sem Google Fonts. */
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url("../font/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url("../font/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url("../font/roboto-latin-700-normal.woff2") format("woff2"); }

:root {
  /* cores do manual: Azul Ufersa #243E6A, paleta 2 #285AA5 (acao), variacao clara #E1E6FA, Verde Ufersa #99CC33 */
  --azul: #285aa5;
  --azul-escuro: #243e6a;
  --azul-claro: #e1e6fa;
  --verde: #99cc33;
  --fundo: #f3f6f9;
  --texto: #1c2733;
  --texto-2: #536070;
  --borda: #c9d3de;
  --erro: #b42318;
  --erro-fundo: #fdecea;
  --raio: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 400 16px/1.5 "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* ---- estrutura: painel da marca | acesso ---- */
.pagina { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr); min-height: 100vh; }

.marca {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 48px clamp(32px, 5vw, 72px);
  color: #fff;
  background: linear-gradient(160deg, var(--azul) 0%, var(--azul-escuro) 100%);   /* gradiente "1-2" do manual */
}
.marca :focus-visible { outline-color: #fff; }
.marca-texto { position: relative; max-width: 32rem; margin: auto 0; }
/* assinatura completa, versao negativa; area de protecao do manual = largura do "U" (~15% da largura) */
.marca-assinatura { display: block; width: clamp(220px, 21vw, 300px); height: auto; margin-bottom: 48px; }
.marca-ambiente {
  position: absolute; top: 24px; left: clamp(32px, 5vw, 72px);
  padding: 2px 10px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: .08em;
}
/* o retangulo verde e o elemento grafico de repeticao da marca (manual, assinaturas setoriais) */
.marca-barra { display: block; width: 56px; height: 6px; margin-bottom: 20px; background: var(--verde); }
.marca-titulo { margin: 0 0 16px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.marca-texto > p { margin: 0 0 32px; font-size: 17px; opacity: .9; }
.marca-sistemas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.marca-sistemas li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; opacity: .92; }
.marca-sistemas strong { min-width: 4.2em; font-weight: 700; letter-spacing: .03em; }

.acesso {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  padding: 48px 24px;
}

/* ---- cartao ---- */
.cartao {
  width: 100%; max-width: 400px;
  background: #fff;
  border: 1px solid #e1e7ee; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 40, 72, .05), 0 12px 32px -12px rgba(16, 40, 72, .18);
  padding: 36px 32px 28px;
}
.cartao h1 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700; }
.cartao-sub { margin: 4px 0 24px; color: var(--texto-2); font-size: 15px; }

label { display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 600; }
input[type="text"], input[type="password"], #username, #password {
  display: block; width: 100%; height: 48px; padding: 0 14px;
  font: inherit; color: var(--texto);
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio);
  transition: border-color .15s, box-shadow .15s;
}
#username, #password { font-size: 16px; } /* 16px: o iOS nao da zoom ao focar */
#username:focus, #password:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(40, 90, 165, .22); }

.campo-senha { position: relative; }
.campo-senha #password { padding-right: 52px; }
.ver-senha {
  position: absolute; top: 2px; right: 2px; width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--texto-2); cursor: pointer;
}
.ver-senha:hover { color: var(--azul); background: var(--azul-claro); }
.ver-senha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ver-senha .risco { display: none; }
.ver-senha[aria-pressed="true"] .risco { display: inline; }

.caps { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #8a5a00; }
.caps[hidden] { display: none; }

.alerta:empty { display: none; }
.alerta {
  margin-bottom: 8px; padding: 12px 14px;
  font-size: 14px; color: var(--erro);
  background: var(--erro-fundo); border: 1px solid #f5c2bd; border-radius: var(--raio);
}
.alerta p { margin: 0; }

.entrar {
  display: block; width: 100%; height: 48px; margin-top: 24px;
  font: 500 16px/1 "Roboto", system-ui, sans-serif; color: #fff;
  background: var(--azul); border: 0; border-radius: var(--raio); cursor: pointer;
  transition: background-color .15s;
}
.entrar:hover { background: var(--azul-escuro); }
.entrar:disabled { opacity: .7; cursor: progress; }

/* ---- ajuda e primeiro acesso ---- */
.ajuda { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 20px; font-size: 14px; }
.ajuda a { padding: 4px 0; text-decoration: none; font-weight: 600; }
.ajuda a:hover { text-decoration: underline; }

.primeiro-acesso {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  margin-top: 20px; padding: 16px 0 4px; border: 0; border-top: 1px solid #e6ebf0; background: none;
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--texto); text-align: left; cursor: pointer;
}
.primeiro-acesso::after {
  content: ""; width: 8px; height: 8px; margin-right: 6px;
  border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); transform: rotate(-45deg);
}
.primeiro-acesso:hover { color: var(--azul); }

/* dialogo "Criar conta": modal nativo. No desktop, centralizado sobre a coluna do cartao
   (coluna da direita = 7/12 da largura, centro em 17/24); no celular, no centro da tela. */
.dialogo {
  width: min(400px, calc(100vw - 32px)); padding: 24px;
  border: 0; border-radius: 14px; color: var(--texto); background: #fff;
  box-shadow: 0 24px 48px -12px rgba(16, 40, 72, .35);
}
.dialogo::backdrop { background: rgba(36, 62, 106, .5); }   /* Azul Ufersa */
.dialogo[open] { animation: dialogo-abre .16s ease-out; }
@keyframes dialogo-abre { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (min-width: 901px) {
  .dialogo { margin: auto 0; left: calc(100vw * 17 / 24); right: auto; translate: -50% 0; }
}
.dialogo-topo { display: flex; justify-content: space-between; align-items: center; }
.dialogo h2 { margin: 0; font-size: 20px; font-weight: 700; }
.dialogo-sub { margin: 4px 0 16px; font-size: 14px; color: var(--texto-2); }
.fechar {
  width: 40px; height: 40px; margin: -8px -8px 0 0; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: none; color: var(--texto-2); cursor: pointer;
}
.fechar:hover { background: var(--azul-claro); color: var(--azul); }
.fechar .ic { width: 20px; height: 20px; }
.opcoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opcoes li a {
  display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: center;
  padding: 12px 14px; text-decoration: none;
  border: 1px solid var(--borda); border-radius: var(--raio); color: var(--texto);
}
.opcoes li a:hover { border-color: var(--azul); background: var(--azul-claro); }
.opcoes li strong { display: block; color: var(--azul); font-size: 15px; }
.opcoes li span { display: block; font-size: 13px; color: var(--texto-2); }
.opcoes li .ic { grid-row: 1 / span 2; width: 26px; height: 26px; color: var(--azul); }

.seguranca {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 24px 0 0; font-size: 13px; line-height: 1.45; color: var(--texto-2);
}
.seguranca svg { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--texto-2); stroke-width: 1.8; stroke-linejoin: round; }

/* ---- icones (SVG inline, traco na cor do texto) ---- */
.ic { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.campo-icone { position: relative; }
.campo-icone > .ic { position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; color: var(--texto-2); pointer-events: none; }
.campo-icone #username, .campo-icone #password { padding-left: 44px; }
.campo-icone:focus-within > .ic { color: var(--azul); }
.entrar { display: flex; align-items: center; justify-content: center; gap: 10px; }
.entrar .ic { width: 20px; height: 20px; }
.ajuda a { display: inline-flex; align-items: center; gap: 6px; }
.ajuda .ic { width: 16px; height: 16px; }

/* ---- tela de troca de senha obrigatoria (casTrocaSenhaObrigatoriaView) ---- */
.passos { margin: 0 0 24px; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.passos li + li { margin-top: 8px; }
.botao-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.sair { margin: 16px 0 0; text-align: center; font-size: 14px; }
.sair a { font-weight: 500; }

/* ---- rodape ---- */
.rodape { max-width: 400px; width: 100%; font-size: 12px; line-height: 1.5; color: var(--texto-2); text-align: center; }
.rodape p { margin: 0; }

/* ---- telas estreitas: uma coluna, painel vira faixa ---- */
@media (max-width: 900px) {
  .pagina { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .marca { flex-direction: row; align-items: center; justify-content: space-between; padding: 12px 16px; }
  .marca-texto { margin: 0; order: -1; }   /* assinatura a esquerda; em producao nao ha etiqueta */
  .marca-texto > :not(.marca-assinatura) { display: none; }
  .marca-assinatura { width: 140px; margin: 0; }
  .marca-ambiente { position: static; }
  .acesso { justify-content: flex-start; padding: 24px 16px 32px; gap: 24px; }
}
@media (max-width: 380px) {
  .cartao { padding: 24px 18px 20px; border-radius: 12px; }
  .ajuda { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}