/* telas/login.css — Tela de entrada: fundo com blobs, cartão, rota animada de etapas e legenda. */
.login { min-height: 100vh; position: relative; z-index: 1; overflow: hidden; display: grid; place-items: start center; padding: 40px 20px 60px; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .6; pointer-events: none; }
.blob-1 { width: 620px; height: 620px; right: -220px; top: -260px; background: radial-gradient(circle, rgba(181,8,8,.20), transparent 65%); }
.blob-2 { width: 480px; height: 480px; left: -180px; bottom: -180px; background: radial-gradient(circle, rgba(47,111,214,.16), transparent 65%); }
.blob-3 { width: 380px; height: 380px; left: 30%; bottom: 8%; background: radial-gradient(circle, rgba(12,194,84,.14), transparent 65%); }
.login-caixa { position: relative; width: min(600px, 100%); display: grid; gap: 22px; }
.login-topo { text-align: center; display: grid; justify-items: center; gap: 10px; padding-top: 8px; }
.login-topo img { width: 240px; max-width: 70%; }
.login-topo h1 { font-size: 30px; margin-top: 6px; }
.login-topo p { color: var(--texto); max-width: 52ch; font-size: 15px; line-height: 1.6; }
.login-card { display: grid; gap: 14px; padding: 26px 28px 22px; border-radius: var(--raio-lg); box-shadow: var(--sombra-2); }
.login-card h2 { font-size: 20px; text-transform: none; letter-spacing: 0; font-weight: 800; }
.login-card .sub { color: var(--cinza); margin-top: -8px; }
.login-card .rodape { font-size: 12px; color: var(--cinza); text-align: center; margin-top: 4px; }
.login-rota { text-align: center; display: grid; justify-items: center; gap: 8px; padding: 8px 4px 0; }
.login-rota h3 { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cinza); }
.rota-svg { width: 100%; max-width: 560px; height: auto; overflow: visible; }
.rota-svg .trilho { stroke: var(--borda-forte); stroke-width: 3; fill: none; stroke-dasharray: 6 8; }
.rota-svg .trilha { stroke: url(#gradRota); stroke-width: 4; fill: none; stroke-linecap: round; }
.rota-svg .no circle { fill: #fff; stroke-width: 4; }
.rota-svg .no text { font-family: Poppins, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; fill: var(--tinta); text-anchor: middle; }
.rota-etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; text-align: left; margin-top: 4px; }
.rota-etapas div { display: grid; grid-template-columns: 10px 1fr; gap: 4px 10px; align-items: start; background: rgba(255,255,255,.7); border: 1px solid var(--borda); border-radius: var(--raio-md); padding: 12px 14px; backdrop-filter: blur(6px); }
.rota-etapas i { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; grid-row: span 2; }
.rota-etapas b { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); }
.rota-etapas span { font-size: 12px; color: var(--cinza); line-height: 1.45; }
.rota-redespacho { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--texto); margin-top: 2px; }
.rota-redespacho i { width: 10px; height: 10px; border-radius: 50%; background: var(--roxo); flex: none; }
.rota-redespacho b { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); }
.login-rota small { color: var(--cinza); font-size: 12px; margin-top: 10px; }