/* Tela de login do NOC: coluna da marca (esquerda) + cartão (direita). No celular, a marca vira faixa no topo. */
body.login { min-height: 100vh; }
.pagina { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

/* ------------------------------------------------------------------ marca */
.marca {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
    padding: 64px 56px 200px; background:
        radial-gradient(120% 90% at 0% 0%, #1b1d10 0%, transparent 55%),
        linear-gradient(160deg, #141517 0%, #0d0e10 100%);
    border-right: 1px solid var(--sw-line);
}
html.light .marca { background: radial-gradient(120% 90% at 0% 0%, #2a2b12 0%, transparent 55%), linear-gradient(160deg, #1a1b1e 0%, #111214 100%); border-right-color: transparent; }
.marca-conteudo { position: relative; z-index: 1; max-width: 30rem; display: flex; flex-direction: column; gap: 14px; }
.marca-logo { width: 150px; height: auto; margin-bottom: 18px; }
.marca h1 { color: #f2f3f5; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
.marca-sub { color: #b9bdc4; font-size: 1.02rem; }
.marca-lista { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 12px; }
.marca-lista li { display: flex; align-items: center; gap: 12px; color: #d4d7dc; font-size: 0.95rem; }
.marca-lista .ic {
    display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: rgba(251, 250, 2, 0.08); border: 1px solid rgba(251, 250, 2, 0.18); color: #fbfa02;
}
.marca-lista .ic svg { width: 18px; height: 18px; }
.paisagem { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; pointer-events: none; }
.paisagem .fibras path { fill: none; stroke: rgba(251, 250, 2, 0.16); stroke-width: 1.6; }
.paisagem .fibras path:nth-child(2) { stroke: rgba(106, 166, 248, 0.16); }
.paisagem .fibras path:nth-child(4) { stroke: rgba(255, 255, 255, 0.07); }
.paisagem .nos circle { fill: #2a2c30; stroke: rgba(251, 250, 2, 0.45); stroke-width: 1.5; }
.paisagem .nos .no-forte { fill: #fbfa02; stroke: none; }
.paisagem .arcos path { fill: none; stroke: rgba(251, 250, 2, 0.55); stroke-width: 3; stroke-linecap: round; }

/* ------------------------------------------------------------------ lado do formulário */
.lado { display: flex; flex-direction: column; min-height: 100vh; padding: 32px; }
.lado-centro { flex: 1; display: grid; place-items: center; }
.cartao-login {
    width: min(26rem, 100%); background: var(--sw-s1); border: 1px solid var(--sw-line); border-radius: 16px;
    padding: 32px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--sw-shadow-lg);
}
.passo { display: flex; flex-direction: column; gap: 16px; }
.passo h2 { font-size: 1.35rem; }
.passo .sub { color: var(--sw-t3); font-size: 0.9rem; margin-top: -8px; }
.entrada { position: relative; display: flex; align-items: center; }
.entrada > .ic { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--sw-t4); pointer-events: none; }
.entrada > .ic svg { width: 18px; height: 18px; }
.entrada input { padding-left: 40px; min-height: 44px; font-size: 0.95rem; }
.entrada input[type=password], .entrada input#pw { padding-right: 44px; }
.ver-senha {
    position: absolute; right: 6px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent;
    color: var(--sw-t3); cursor: pointer; display: grid; place-items: center;
}
.ver-senha:hover { background: var(--sw-s3); color: var(--sw-t1); }
.ver-senha svg { width: 18px; height: 18px; }
.ver-senha[aria-pressed="true"] { color: var(--sw-accent-text); }
.caps { color: var(--sw-warn); font-size: 0.8rem; }
.btn-grande { min-height: 46px; font-size: 0.95rem; width: 100%; }
input.codigo { font-family: var(--sw-mono); font-size: 1.6rem; letter-spacing: 0.4em; text-align: center; min-height: 54px; }
#erro strong { color: var(--sw-t1); }
.ajuda-login { color: var(--sw-t3); font-size: 0.84rem; border-top: 1px solid var(--sw-line); padding-top: 14px; }
.ajuda-login summary { cursor: pointer; color: var(--sw-t2); font-weight: 500; }
.ajuda-login summary:hover { color: var(--sw-t1); }
.ajuda-login ul { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.cartao-login.tremer { animation: tremer 360ms ease-in-out; }
@keyframes tremer { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--sw-t3); font-size: 0.8rem; flex-wrap: wrap; }
.rodape .btn svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ celular */
@media (max-width: 900px) {
    .pagina { grid-template-columns: 1fr; }
    .marca { padding: 28px 20px 26px; min-height: 0; border-right: 0; border-bottom: 1px solid var(--sw-line); }
    .marca-logo { width: 96px; margin-bottom: 4px; }
    .marca h1 { font-size: 1.35rem; }
    .marca-sub { font-size: 0.9rem; }
    .marca-lista, .paisagem { display: none; }
    .lado { padding: 20px 16px; min-height: 0; }
    .cartao-login { padding: 24px 20px; box-shadow: none; }
}