/* signon.css — blocos exclusivos da página .SIGNON (Views/Home/Signon.cshtml). Depende de we.css. */

/* ---------- Mock do herói: sessão orquestrada ---------- */
.sessao .sys { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.sessao .sys:last-child { border-bottom: 0; }
.sessao .sys .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-3); color: var(--ink-2); display: grid; place-items: center; }
.sessao .sys .ic .i { width: 15px; height: 15px; }
.sessao .sys b { display: block; color: var(--ink); font-weight: 600; }
.sessao .sys small { display: block; color: var(--ink-3); font-size: .76rem; font-family: var(--f-mono); }
.sessao .senha { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: .8rem; color: var(--ink-3); letter-spacing: .2em; }
.sessao .senha .i { width: 14px; height: 14px; letter-spacing: 0; color: var(--accent); }

/* ---------- Raias do fluxo ---------- */
.lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lane { border-radius: var(--r-lg); padding: 16px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.lane .lane-title { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.lane .lane-title::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--lane-c, var(--line-2)); }
.lane[data-tone="info"] { --lane-c: var(--blue-500); background: var(--info-wash); border-color: color-mix(in srgb, var(--blue-500) 30%, transparent); }
.lane[data-tone="accent"] { --lane-c: var(--accent-fill); background: var(--accent-wash); border-color: var(--accent-line); }
.lane[data-tone="warn"] { --lane-c: var(--amber-500); background: var(--warn-wash); border-color: color-mix(in srgb, var(--amber-500) 35%, transparent); }
.lane[data-tone="neutral"] { --lane-c: var(--ink-3); background: var(--surface-2); }
.mini { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.mini .n { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-family: var(--f-mono); font-weight: 600; font-size: .85rem; flex: none; }
.mini .n .i { width: 17px; height: 17px; }
.mini b { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: .98rem; }
.mini b .i { width: 16px; height: 16px; color: var(--accent); }
.mini small { display: block; color: var(--ink-3); font-size: .84rem; margin-top: 3px; line-height: 1.45; }
@media (max-width: 980px) { .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lanes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Linha do tempo por raia ---------- */
.tl-item[data-lane="gestao"] { --tl: var(--blue-500); }
.tl-item[data-lane="signon"] { --tl: var(--accent-fill); }
.tl-item[data-lane="rpa"] { --tl: var(--amber-500); }
.tl-item[data-lane="sistemas"] { --tl: var(--ink-3); }
.legend-lanes { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .82rem; color: var(--ink-2); margin-top: 18px; }
.legend-lanes span { display: inline-flex; align-items: center; gap: 7px; }
.legend-lanes i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend-lanes .gestao { background: var(--blue-500); } .legend-lanes .signon { background: var(--accent-fill); } .legend-lanes .rpa { background: var(--amber-500); } .legend-lanes .sistemas { background: var(--ink-3); }