/* Login do Portal: mesmo desenho do login dos módulos (Gestor/Portaria: cabeçalho, caixa com ícone e marcas de água).
   Ao alterar, mudar o ?v= em Paginas/entrar.html. */
:root {
    --cor-cabecalho: #2B6CB0;
    --cor-cabecalho-escura: #1C4A80;
    --fundo-login: #f3f6f9;
    --superficie: #ffffff;
    --linha: #D5DDE3;
    --texto: #1F2A33;
    --texto-2: #5B6873;
    --raio: 6px;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    font-size: 14px;
    color: var(--texto);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo-login); }

.app { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100vh; }

/* ---------------------------------------------------------------- cabeçalho (o "topo compacto" dos módulos) */
.cabecalho { position: relative; z-index: 6; min-height: 75px; display: flex; align-items: center; gap: 18px; padding: 9px 20px; color: #fff; background: linear-gradient(90deg, var(--cor-cabecalho-escura), var(--cor-cabecalho)); box-shadow: 0 2px 6px rgba(0,0,0,.12); font-size: 16px; }
.cabecalho-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cabecalho-logo svg { width: 40px; height: 40px; flex: 0 0 auto; }
.cabecalho-titulo { font-size: 21px; font-weight: 700; line-height: 1.1; }
.cabecalho-escola { font-size: 13px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.cabecalho-versao { font-size: 10px; opacity: .75; }
.cabecalho-espaco { flex: 1; }
.relogio { display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: end; }
.relogio-dia { font-size: 26px; font-weight: 300; text-align: right; }
.relogio-hora { font-size: 26px; font-weight: 600; }
.relogio-mes { font-size: 13px; text-align: right; opacity: .9; }
.relogio-semana { font-size: 13px; opacity: .9; }
@media (max-width: 560px) { .relogio { display: none; } .cabecalho-escola { max-width: 70vw; } }

/* ---------------------------------------------------------------- caixa de login */
.pagina-login { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.caixa-login { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 44px; max-width: calc(100vw - 32px); padding: 40px 52px 44px; text-align: left; background: var(--superficie); border: 1px solid var(--linha); border-top: 5px solid var(--cor-cabecalho); border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 12px 36px rgba(0,0,0,.10); }
.login-icone { padding-right: 44px; border-right: 1px solid var(--linha); }
.login-icone svg { display: block; width: 170px; height: 170px; color: var(--cor-cabecalho); }
.login-form { width: 380px; max-width: 100%; }
.login-titulo { font-size: 32px; font-weight: 300; margin: 0 0 18px; white-space: nowrap; }
@media (max-width: 900px) {
    .caixa-login { padding: 28px 24px 32px; gap: 20px; }
    .login-icone { padding-right: 0; border-right: 0; }
    .login-icone svg { width: 110px; height: 110px; }
    .login-titulo { font-size: 26px; white-space: normal; }
}

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo label { font-size: 15px; color: var(--texto-2); }
.campo input { height: 50px; padding: 6px 12px; font: inherit; font-size: 20px; color: var(--texto); border: 1px solid var(--linha); border-radius: var(--raio); background: #fff; width: 100%; }
.campo input:focus { outline: 3px solid rgba(43, 108, 176, .45); border-color: var(--cor-cabecalho); }
.botoes { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; min-width: 150px; padding: 10px 22px; border: none; border-radius: var(--raio); background: var(--cor-cabecalho-escura); color: #fff; font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.botao:active:not(:disabled) { filter: brightness(.9); }
.botao:disabled { opacity: .45; cursor: default; }
.erro { margin: 14px 0 0; color: #D9534F; font-weight: 600; }
.erro[hidden] { display: none; }

/* Marcas de água: GIAE (esquerda) e Microabreu (direita) */
.marca-agua { position: fixed; bottom: 24px; width: 104px; height: 38.4px; background-repeat: no-repeat; background-size: contain; opacity: .16; pointer-events: none; user-select: none; z-index: 0; }
.marca-agua-esquerda { left: 28px; background-image: url("img/logo-giae.png"); background-position: left bottom; }
.marca-agua-direita { right: 28px; background-image: url("img/logo-microabreu.png"); background-position: right bottom; }
@media (max-width: 700px) { .marca-agua { width: 140px; height: 60px; bottom: 12px; } }