.ao-cena { position: absolute; left: 20px; top: 66px; width: 1160px; height: 718px; display: flex; gap: 16px; color: var(--grafite); font-size: 13px; }
.ao-cel { position: relative; flex: none; width: 340px; height: 718px; }
.ao-cel .celular { position: absolute; left: 0; top: 0; right: auto; bottom: auto; width: 340px; height: 718px; transform: none; }
.ao-tela { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ui-fundo); }
.ao-tela-topo { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 12px; background: var(--verde-sispeq); color: var(--branco); }
.ao-tela-topo b { font: 700 18px/1.2 var(--fonte-display); }
.ao-tela-topo span { font-size: 12.5px; opacity: 0.9; }
.ao-tela-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px 10px 40px; overflow: hidden; }

.ao-inicio { align-items: stretch; gap: 10px; padding: 34px 18px 40px; }
.ao-inicio img { width: 170px; height: auto; align-self: center; }
.ao-inicio-tit { text-align: center; font: 800 20px/1.2 var(--fonte-display); color: var(--verde-profundo); }
.ao-inicio-sub { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-secundario); }
.ao-perfil { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 16px; text-align: left; font-family: var(--fonte-sans); background: var(--branco); border: 1px solid var(--ui-borda); border-left: 4px solid var(--verde-sispeq); border-radius: 10px; cursor: pointer; }
.ao-perfil:hover { background: var(--verde-claro); }
.ao-perfil:focus-visible { outline: 2px solid var(--verde-sispeq); outline-offset: 2px; }
.ao-perfil b { font: 800 18px/1.2 var(--fonte-display); color: var(--verde-profundo); }
.ao-perfil span { font-size: 13.5px; line-height: 1.35; color: var(--texto-secundario); }

.ao-grupo { margin-top: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--verde-sispeq); }
.ao-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 11px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 9px; }
.ao-item-doc { font-size: 11.5px; font-weight: 700; color: var(--verde-sispeq); }
.ao-item-nome { font-size: 13px; font-weight: 600; line-height: 1.25; }
.ao-apagado { opacity: 0.25; }

.ao-form-nome { padding: 2px 4px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--verde-profundo); }
.ao-opcoes { display: flex; flex-direction: column; gap: 8px; }
.ao-opcao { padding: 13px; text-align: left; font: 700 15px/1.2 var(--fonte-sans); background: var(--branco); border: 2px solid var(--ui-borda); border-radius: 10px; cursor: pointer; }
.ao-opcao:focus-visible { outline: 2px solid var(--verde-sispeq); outline-offset: 2px; }
.ao-opcao.op-concluido.ativo { background: var(--verde-claro); border-color: var(--verde-sispeq); color: var(--verde-profundo); }
.ao-opcao.op-parcial.ativo { background: var(--aviso-fundo); border-color: #E0A11B; color: var(--aviso-texto); }
.ao-opcao.op-nao.ativo { background: var(--vermelho-fundo); border-color: var(--vermelho); color: var(--vermelho); }
.ao-just { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; font-size: 14px; line-height: 1.35; }
.ao-just small { font-size: 11.5px; font-weight: 700; color: var(--texto-secundario); }
.ao-just.dispensada span { color: var(--texto-secundario); }
.ao-botao { margin-top: auto; padding: 13px; text-align: center; border-radius: 10px; background: var(--verde-sispeq); color: var(--branco); font-weight: 700; font-size: 14px; }

.ao-aprov { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 8px 11px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; }
.ao-aprovar { align-self: stretch; padding: 7px; text-align: center; border-radius: 7px; background: var(--verde-sispeq); color: var(--branco); font-weight: 700; font-size: 12.5px; }
.ao-aprovar.feito { background: var(--verde-claro); color: var(--verde-profundo); }

.ao-rot { font-size: 12.5px; color: var(--texto-secundario); }
.ao-status-cel { padding: 16px 12px; text-align: center; border-radius: 10px; font: 800 19px/1.2 var(--fonte-display); background: var(--aviso-fundo); color: var(--aviso-texto); }
.ao-status-cel.f2 { background: #E3ECF8; color: #2F6FB0; }
.ao-status-cel.f4 { background: var(--verde-claro); color: var(--verde-sispeq); }
.ao-cq-txt { margin: 0; padding: 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--texto-secundario); }

.ao-direita { position: relative; flex: 1; min-width: 0; }
.ao-vista { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; }
.ao-vista.ao-lado { flex-direction: row; }
.ao-bloco { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 13px 16px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; }
.ao-bloco h4 { margin: 0; font: 700 15px/1.25 var(--fonte-display); color: var(--verde-profundo); }
.ao-bloco p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--texto-secundario); }
.ao-cresce { flex: 1; min-height: 0; }
.ao-graf { flex: 1; min-height: 0; }
.ao-origem { display: flex; align-items: center; gap: 22px; }
.ao-origem-txt { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-size: 15px; }
.ao-tres { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ao-tres .ao-bloco { justify-content: space-between; }
.ao-tres .gf-bh-linha { grid-template-columns: 30px 1fr 70px; gap: 6px; }
.ao-duas { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ao-grande { font: 800 40px/1 var(--fonte-display); color: var(--verde-sispeq); }
.ao-grande.azul { color: #2F6FB0; }
.ao-coluna-graf { flex: none; width: 262px; align-items: center; justify-content: center; gap: 16px; }
.ao-coluna-graf h4 { align-self: flex-start; }
.ao-lista { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.ao-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid var(--ui-borda); border-radius: 9px; }
.ao-linha-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ao-linha-txt b { font-size: 14px; line-height: 1.25; }
.ao-linha-txt small { font-size: 12.5px; line-height: 1.3; color: var(--aviso-texto); }
.ao-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.ao-tab th { padding: 9px 10px; text-align: left; font-size: 12px; color: var(--branco); background: var(--verde-sispeq); }
.ao-tab td { height: 76px; padding: 4px 10px; border-top: 1px solid #E7ECE9; line-height: 1.3; }
.ao-td-doc { font-weight: 700; color: var(--verde-sispeq); }
.ao-pil-aprov { white-space: nowrap; }
.ao-regra { flex: none; padding: 12px 16px; border-radius: 10px; background: var(--verde-claro); color: var(--verde-profundo); font-size: 14px; font-weight: 600; }

.ao-trilha { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding-top: 6px; }
.ao-no { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; font-size: 13px; font-weight: 700; color: var(--texto-secundario); }
.ao-no::before { content: ''; position: absolute; top: 15px; left: -50%; right: 50%; height: 4px; background: #DCE3DF; }
.ao-no:first-child::before { display: none; }
.ao-no i { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: #DCE3DF; }
.ao-no.evento i { width: 22px; height: 22px; margin: 6px 0; }
.ao-no.feito { color: var(--verde-profundo); }
.ao-no.feito::before { background: var(--verde-sispeq); }
.ao-no.feito i { background: var(--verde-sispeq); }
.ao-no.atual i { box-shadow: 0 0 0 5px var(--verde-claro); }
.ao-status-grade { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ao-tres-v { min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.ao-tres-v .ao-bloco { flex: 1; justify-content: center; gap: 4px; }
.ao-tres-v b { font: 800 19px/1.2 var(--fonte-display); color: var(--verde-sispeq); }