/* Páginas do login: mesmo visual da tela (tela.py, CSS_LOGIN). Fonte e logo vêm do próprio robô. */
@font-face { font-family: "Montserrat"; src: url("/_login/static/fontes/Montserrat-Variavel.ttf"); font-weight: 100 900; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: Montserrat, sans-serif; font-weight: 500; font-size: 15px; color: #333333; background: #F6F3F2; }
.lv { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.painel { position: relative; overflow: hidden; background: #043C08; color: #FFFFFF; display: flex; flex-direction: column;
    gap: 48px; padding: 56px 64px; }
.painel .elipses { position: absolute; right: -260px; bottom: -150px; pointer-events: none; }
.painel .logo { height: 76px; width: auto; align-self: flex-start; position: relative; }
.meio { display: flex; flex-direction: column; gap: 16px; max-width: 460px; position: relative; margin: auto 0; }
.olho { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #B9CDB5; }
.meio h1 { margin: 0; font-size: 44px; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: #FFFFFF; }
.meio p { margin: 0; font-size: 16px; line-height: 1.6; color: #DCE7DA; }
.traco { width: 56px; height: 4px; background: #E30613; border-radius: 2px; }
.lado { display: flex; justify-content: center; align-items: center; padding: 56px 32px; }
.caixa { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.caixa h2 { margin: 0; font-size: 30px; font-weight: 800; color: #043C08; }
.sub { margin: 0 0 6px; color: #4F4845; line-height: 1.5; }
form { display: flex; flex-direction: column; gap: 8px; }
label { font-weight: 700; font-size: 14px; color: #333333; margin-top: 8px; }
input[type=email], input[type=password] { font: inherit; padding: 13px 14px; border: 1px solid #D6CCC8; border-radius: 10px;
    background: #FFFFFF; color: #333333; }
input:focus { outline: 2px solid #043C08; outline-offset: 1px; border-color: #043C08; }
button { margin-top: 14px; font: inherit; font-weight: 800; color: #FFFFFF; background: #E30613; border: 0;
    border-radius: 12px; padding: 14px; cursor: pointer; }
button:hover { background: #C40511; }
button:focus { outline: 3px solid #043C08; outline-offset: 2px; }
.nota { margin: 6px 0 0; font-size: 13px; color: #6B6461; line-height: 1.5; }
.nota a { color: #043C08; font-weight: 700; }
.alerta { padding: 12px 14px; border-radius: 10px; line-height: 1.5; font-size: 14px; }
.alerta.erro { background: #FCE8E9; color: #A3101A; border: 1px solid #E2B8BB; }
.alerta.info { background: #E7F0E8; color: #2E5E36; border: 1px solid #BFD6C2; }
.regras { margin: 10px 0 0; padding-left: 18px; color: #6B6461; font-size: 13px; line-height: 1.6; }
@media (max-width: 860px) {
    .lv { grid-template-columns: 1fr; }
    .painel { padding: 32px 24px; gap: 24px; }
    .painel .elipses { display: none; }
    .meio h1 { font-size: 30px; }
    .lado { padding: 32px 16px; align-items: flex-start; }
}